Angularjs - Using controller

Question

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.

You should not hide your question in comments in your code, especially when the question itself scrolls off the screen. That being said, if your questions are literally "how could do it?", "using scope object?", and "with a json file?", you have multiple questions, which are all explained very well in the documentation. — Claies
– Claies, Commented Jan 15, 2016 at 9:59
just do $scope.customer = { number: 12, portfolio: "somePortfolio" } — devqon
– devqon, Commented Jan 15, 2016 at 10:44
thanks for answer, with the documentation and your answers it has resolved — Eladerezador
– Eladerezador, Commented Jan 15, 2016 at 11:12

teobais · Accepted Answer · 2016-01-15 10:45:50Z

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).

Charlie · Accepted Answer · 2016-01-15 10:01:09Z

0

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';
});

answered Jan 15, 2016 at 10:01

Charlie

24k12 gold badges65 silver badges96 bronze badges

Collectives™ on Stack Overflow

Angularjs - Using controller

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related