Not able to display javaScript object properties from the controller function

Question

I'm new to angularJS, I'm trying to iterate through object properties mentioned in controller function using ng-repeat, but no success!

   <body ng-app="myApp">
          <div ng-controller="myCtrl">

<ul>

 <li ng-repeat="dish in myCtrl.dishes">{{ dish.name + ', ' + dish.age + ', ' + dish.job }}</li>

 </ul>

 </div>
 <script>
  var app=angular.module('myApp',[]);
      app.controller('myCtrl',function(){
            var dishes=[
                         {
                           name:'nag',
                            age:'23',
                           job:'UI Developer'

                          },
                        {
                            name:'Manu',
                             age:'30',
                              job:'SE'

                         }

                        ];

                       this.dishes = dishes;
                    });

     </script>

Sajeetharan · Accepted Answer · 2017-03-11 17:19:45Z

1

You should use this instead of var, in controller.

Also your view should be,

<div ng-app="myApp" ng-controller="myCtrl as ctrl">
      <ul>
     <li ng-repeat="dish in ctrl.dishes">

DEMO

var app=angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
this.dishes=[
{
 name:'nag',
 age:'23',
 job:'UI Developer'
},
{
 name:'Manu',
 age:'30',
 job:'SE'
}
];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl as ctrl">
  <ul>
 <li ng-repeat="dish in ctrl.dishes">{{ dish.name + ', ' + dish.age + ', ' + dish.job }}</li>
 </ul>
</div>

edited Mar 11, 2017 at 17:19

answered Mar 11, 2017 at 16:55

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Nag Over a year ago

can't we do it without using scope object?

Sajeetharan Over a year ago

You can do it by using this.dieshes = yourarray. and then in view ctr.dishes

Nag Over a year ago

and yes..that's what i wanted to do. I've assigned using "this" now, please check it once again and tel me where i'm goin wrong

Nag Over a year ago

one doubt. why are we using alias for controller function? and when i removed it, it simply didn't work !

Sajeetharan Over a year ago

you should have that, if you are not using $scope variable. toddmotto.com/digging-into-angulars-controller-as-syntax

|

Daniel · Accepted Answer · 2017-03-11 18:09:07Z

0

using $scope. be careful using 'this', because you can lose the context into the functions.

var app=angular.module('myApp',[]);
app.controller('myCtrl',['$scope',function($scope){
$scope.dishes=[{name:'nag',age:'23',job:'UI Developer'},
               {name:'Manu',age:'30',job:'SE'}];
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <ul>
 <li ng-repeat="dish in dishes">{{ dish.name + ', ' + dish.age + ', ' + dish.job }}</li>
 </ul>
</div>

answered Mar 11, 2017 at 18:09

Daniel

116 bronze badges

Collectives™ on Stack Overflow

Not able to display javaScript object properties from the controller function

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related