javascript - Angular - 错误 : ngRepeat:dupes Duplicate Key in Repeater

Question

我正在开发一个简单的待办事项应用程序，它将任务添加到现有的 json 数据数组中。然而，当我尝试添加多个任务时，我收到此错误:错误:[ngRepeat:dupes]。我一生都无法弄清楚出了什么问题。我怀疑这可能与 namespace 有关，但在更改名称几次后我仍然遇到相同的错误。如果有人能指出我正确的方向，我将不胜感激。

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