Angular - 错误：ngRepeat：重复中继器中的重复键

我正在研究一个简单的待办事项应用程序，该任务将任务添加到现有的json数据数组中。但是，当我尝试添加多个任务时，出现此错误：Error: [ngRepeat:dupes]。我不能为了我的生活找出哪里出了问题。我怀疑它可能与命名空间有关，但在几次更改名称后，我仍然得到相同的错误。如果有人能指引我正确的方向，我将非常感激。Angular - 错误：ngRepeat：重复中继器中的重复键

的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); 
    } 


});

来源

2016-05-14 Frederick M. Rogers

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

应该成为

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

错误是由同一引起对象被使用两次。这也是为什么下面的变化被增加的任务所镜像。

来源

2016-05-14 14:40:52

对不起，刚才有人说这个已经在问题的评论中了。 –

嘿，是的，我做到了。这是我能想到的唯一解决方案。但是，谢谢你为我确认，我不确定这是一个合法的解决方案，还是只是一个黑客工作。 –

没问题，是的，这是正确的方法。因为newTask仍然指向你添加到数组中的同一个对象。这意味着所做的更改将在U.I中更新。并再次将其推入数组会导致重复的错误，因为现在您已经两次将相同的对象引用添加到数组中。 –

使用track by $index：

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

来源

2016-05-14 13:32:23

嗨，你的建议会消除错误，但是表单域中文本的任何更改都会被镜像到已添加的任务中。请参阅链接：http://taskcomplete.carbonium.no/apptest.html –

你是否在修改输入后点击按钮？ –

是的，但是在添加'$ scope.newTask = {};'后'到'addTask（）'函数，我可以清除提交的对象，并通过这些接缝来解决问题。但这是最好的解决方案吗？ –

使用此

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

所以角度会跟踪你的NG-重复节点

来源

2016-05-14 13:33:21 sumair

Angular - 错误：ngRepeat：重复中继器中的重复键

回答

相关问题