Question

我正在开发一个简单的todo应用程序，它将任务添加到现有的json数据数组中。但是，当我尝试添加多个任务时，我收到此错误：Error: [ngRepeat:dupes]。我不能为我的生活弄清楚出了什么问题。我怀疑它可能与命名空间有关，但在更改名称几次后我仍然得到相同的错误。如果有人能指出我正确的方向，我会非常感激。

HTML代码

<div id="taskComplete" ng-app="taskComplete">
  <div class="container" ng-controller="taskCtrl">

    <div id="taskCompleteHeading"  class="row">
      <div class="col-xs-12">
        <div class="page-header">
          <h1 class="text-center">TaskComplete <small>An AgularJs App</small></h1>
        </div>
      </div>
    </div>

    <div id="newTaskSubmit">
      <input type="text" ng-model="newTask.title">
      <input type="text" ng-model="newTask.description">
      <button type="button" ng-click="addTask(newTask)">Add Task</button>         
    </div>

    <div class="well">
    <pre>{{newTask | json}}</pre>
    </div>
    <div ng-repeat="task in activeTasks">
      <h4>{{task.title}}</h4>
    </div>

  </div>
</div>

更新的解决方案

<div ng-repeat="task in activeTasks track by $index">
   <h4>{{task.title}}</h4>
</div>

JAVASCRIPT代码

angular
.module('taskComplete')
    .controller('taskCtrl', function($scope, taskFactory) {

    $scope.activeTasks;

    taskFactory.getTasks().success(function(data) {
        $scope.activeTasks = data;
        console.log($scope.activeTasks);
    }).error(function(error) {
        console.log(error);
    });

    $scope.newTask = {};

    $scope.addTask = function(newTask) {
        $scope.activeTasks.push(newTask);   
    }


});

Answer 1

使用此

<div ng-repeat="task in activeTasks track by $index">
   <h4>{{task.title}}</h4>
</div>

因此，angular将跟踪你的ng-repeat节点

Answer 2

使用track by $index：

ng-repeat="task in activeTasks track by $index"

Answer 3

$scope.addTask = function(newTask) {
        $scope.activeTasks.push(newTask);   
 }

应该成为

$scope.addTask = function(newTask) {
    $scope.activeTasks.push(newTask);   
    $scope.newTask = {};
}

错误是由同一个对象使用两次引起的。这也是为什么增加的任务会反映出以下变化的原因。

Angular - 错误：ngRepeat：dupes Repeater中的重复键

3 个答案: