Question

我是angularJS的新手，我试图使用ng-repeat迭代控制器函数中提到的对象属性，但没有成功！

   <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 1

您应该在控制器中使用 this 而不是var。

您的观点也应该是，

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

<强> DEMO

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

使用$ scope。小心使用'this'，因为你可能会丢失函数中的上下文。

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>

无法从控制器功能显示javaScript对象属性

2 个答案: