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：重複中繼器中的重複鍵

回答

相關問題