在AngularJS中刪除元素的錯誤

我試圖刪除Angular中的元素，但從列表中刪除一個元素後，我得到一個 Error: [ngRepeat:dupes]。在AngularJS中刪除元素的錯誤

我的控制器：

app.controller("ListController",[function() { 
    this.tasks = [ 
     { id: 1, taskName : "Cras justo odio 1", badge : 10 }, 
     { id: 2, taskName : "Cras justo odio 2", badge : 12 }, 
     { id: 3, taskName : "Cras justo odio 3", badge : 14 }, 
     { id: 4, taskName : "Cras justo odio 4", badge : 15 } 
    ]; 

    this.remove = function(id) { 
     var key; 
     for (key in this.tasks) { 
      if(this.tasks[key].id === id) { 
      var found = true; 
      break; 
      } 
     } 

     if(found) delete this.tasks[key]; 
    } 
}]);

我的觀點：

<li class="list-group-item" ng-repeat="task in ListCtrl.tasks"> 
    <span class="badge">{{task.badge}}</span> 
    <button type="button" class="btn btn-xs btn-danger" ng-click="ListCtrl.remove(task.id)"><i class="glyphicon glyphicon-remove"></i></button> 
    {{task.taskName}} 
    </li>

堆棧：

Error: [ngRepeat:dupes] http://errors.angularjs.org/1.3.13/ngRepeat/dupes?p0=task%20in%20ListCtrl.tasks&p1=undefined%3Aundefined&p2=undefined 
at Error (native) 
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js:6:417 
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js:233:39 
at Object.fn (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js:122:63) 
at l.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js:123:138) 
at l.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js:126:58) 
at HTMLButtonElement.<anonymous> (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js:215:36) 
at HTMLButtonElement.c (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js:32:389)

來源

2015-02-11 nanndoj

ng-repeat使用遞增計數器來枚舉數組。通過刪除數組中間的一個鍵，angular會認爲該元素未定義。一個不會有問題，但是兩個會導致重複（在ng-repeat中不能有兩個具有相同值的元素） - 重複項是兩個未定義的值。

使用Array.splice（）刪除對象是正確的解決方案。

使用$ index索引將解決重複錯誤，但最終會在html中出現空元素。

Here是一個鏈接到角度討論這種情況的github問題。角色團隊決定將其保持原樣。

Here是如何使用Array.splice（）從數組中刪除特定元素的鏈接。

來源

2015-02-11 18:27:15

謝謝！使用Array.splice（）解決問題 – nanndoj 2015-02-11 18:36:33

使用方法Array.splice（指數，計數），以從數組作爲刪除元素任務是一組對象

來源

2015-02-11 18:23:29 Raulucco

在ng-repeat中使用trackby索引

ng-repeat="task in ListCtrl.tasks track by $index"

來源

2015-02-11 18:26:04

在AngularJS中刪除元素的錯誤

回答

相關問題