在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中删除元素的错误

回答

相关问题