麻烦NG-重复 [英] Trouble with ng-repeat

问题描述

我试图去交手AngularJS并且有这方面的工作，从控制器呼应个性的东西，但是当我试图纳入循环使用NG-重复我得到的是{{tasks.title}}在屏幕上闪烁一秒钟，然后空空div。
我抬头一看任何的例子似乎有点不同，我已经尝试了一些方法，任何人都可以看到我要去哪里错了？

控制器：

  app.controller（'MainController'，['$范围'，函数（$范围）{
    $ scope.tasklist = {
       任务： [{
            标题：洗狗
        }，{
            标题：电子邮件乔
        }]};
    }
]）;
 

HTML

 ＆lt;节类=面板＆GT;
   ＆LT; D​​IV NG控制器=MainController＆GT;
     ＆LT; D​​IV CLASS =缩略图NG重复=，在任务列表任务＆GT;
       ＆所述p为H.; {{tasks.title}}＆下; / P＆GT;
     ＆LT; / DIV＆GT;
   ＆LT; / DIV＆GT;
＆LT; /节＆gt;
 

解决方案

您正在访问属性任务列表而不是实际的任务。它应该是 tasklist.tasks

 ＆lt;节类=面板＆GT;
   ＆LT; D​​IV NG控制器=MainController＆GT;
     ＆LT; D​​IV CLASS =缩略图NG重复=，在tasklist.tasks任务＆GT;
       ＆所述p为H.; {{tasks.title}}＆下; / P＆GT;
     ＆LT; / DIV＆GT;
   ＆LT; / DIV＆GT;
＆LT; /节＆gt;
 

另一种方法是，除去的任务属性

  app.controller（'MainController'，['$范围'，函数（$范围）{
    $ scope.tasklist = [
        {
            标题：洗狗
        }，
        {
            标题：电子邮件乔
        }
    ];
}]）;
 

I'm trying to get to grips with AngularJS and had this working to echo individual things from a controller, but when I tried to incorporate a loop with ng-repeat all I get is {{tasks.title}} flashing onscreen for a second, then a blank empty div. Any examples I've looked up seem a little different and I've tried a few ways, can anyone see where I'm going wrong?

Controller:

app.controller('MainController', ['$scope', function($scope) {
    $scope.tasklist = {
       tasks: [{
            title: 'Wash Dog'
        }, {
            title: 'Email Joe'
        }]};
    }
]);

HTML:

<section class="panel">
   <div ng-controller="MainController">
     <div class="thumbnail" ng-repeat="tasks in tasklist">
       <p>{{ tasks.title }}</p>
     </div>
   </div>
</section>

解决方案

You are accessing the property tasklist not the actual tasks. It should be tasklist.tasks

<section class="panel">
   <div ng-controller="MainController">
     <div class="thumbnail" ng-repeat="tasks in tasklist.tasks">
       <p>{{ tasks.title }}</p>
     </div>
   </div>
</section>

Another way would be to remove the tasks property:

app.controller('MainController', ['$scope', function($scope) {
    $scope.tasklist = [
        {
            title: 'Wash Dog'
        }, 
        {
            title: 'Email Joe'
        }
    ];
}]);

这篇关于麻烦NG-重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！