Nag Nag - 9 months ago 24
AngularJS Question

Not able to display javaScript object properties from the controller function

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>

Answer Source

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>