Nag Nag - 1 year ago 36
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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download