CODEWITHSUNDEEP
angularjs
Eladerezador
Eladerezador

Reputation: 1301

Angularjs - Using controller

I am new to Angular.js. I currently have the following html code, where I define my div with my file html ( ng-include ) and my controller ( ng-controller ):

<div id="customerinformation-maxi" ng-include="'pages/customerinformation-maxi.html'" ng-controller="customerInformationMaxiController" class="col-md-12"></div>

This is the html code for the called html in directive ng-include ( customer-information.html ):

<div class="row">
    <div class="col-md-2">
        <span>Customer Number</span>
        <span>{{customer.number}}</span>
    </div>
    <div class="col-md-2">
        <span>Portfolio</span>
        <span>{{custom.portfolio}}</span>
    </div>
</div>

This is the js controller:

angularRoutingApp.controller('customerInformationMaxiController', function($scope, $http) {
    //Here i need to load the model variable with a literal text {{customer.number}} and {{customer.portfolio}}, how could do it? using scope object? with a json file?
});

Here I need to load the model variable with a literal text {{customer.number}} and {{customer.portfolio}}. How could do it? Using scope object? With a json file?

Thanks for any help.

Upvotes: 0

Views: 73

Answers (2)

teobais
teobais

Reputation: 2946

Yes, you should do it using the $scope object.

To get a general overview, here is a hello-world example:

<div ng-controller="HelloController">
   {{ helloMessage }}
</div>

And in you controller's code (js file or script tag into the html):

var myApp = angular.module('myApp',[]);

myApp.controller('HelloController', ['$scope', function($scope) {
  $scope.helloMessage= 'Hello World!';
}]);

But I foresee some nesting in the provided snippet of your question, so you 're probably dealing with a collection of objects which means that you have to iterate through it, in the html part, using the ng-repeat directive, like:

<tr ng-repeat="customer in customers>
    <td>{{customer.number}}</td>
    <td>{{customer.portfolio}}</td>
</tr>

So, your controller's functionality should contain the customers object, like:

angularRoutingApp.controller('customerInformationMaxiController', function($scope, $http) {
    var customers=[
                {
                    number:'123',
                    portfolio: 'blah blah'
                },
                {
                    number:'124',
                    portfolio: 'blah blah'
                },
                {
                    number:'125',
                    portfolio: 'blah blah'
                }
               ];
});

For further reference, you could read two respective example I have written:

The second one is only to see a sample usage of traversing collections, it is not meant that you have to use json, as you stated in your question; but I see that you also defined the $http service in your controller, so if it's about data that are going to be fetched from a remote destination, the JSON Fetching Example should probably help you better).

Upvotes: 2

Charlie
Charlie

Reputation: 23778

You should use scope objects to give values to your modal variables.

angularRoutingApp.controller('customerInformationMaxiController', function($scope, $http) {
   $scope.customer.number = 'sample number';
   $scope.customer.portfolio = 'sample portfolio';
});

Upvotes: 0

Related Questions