Question

我试图删除Angular中的元素，但我得到了一个从列表中删除元素后Error: [ngRepeat:dupes]。

我的控制器：

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)

Answer 1

ng-repeat使用增量计数器枚举数组。通过删除数组中间的键，angular将认为该元素未定义。一个不会有问题，但是两个会导致重复（你不能在ng-repeat中有两个具有相同值的元素） - 重复是两个未定义的值。

使用Array.splice（）删除对象是正确的解决方案。

使用$ index索引将解决重复错误，但你的html中最终会出现空元素。

Here是角度的github问题的链接，深入讨论了这种情况。有远见的团队决定“按原样”离开。

Here是如何使用Array.splice（）从数组中删除特定元素的链接。

Answer 2

使用Array.splice（index，count）从数组中删除元素，因为task是一个对象数组

Answer 3

在ng-repeat中使用trackby索引

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

从AngularJS中的数组中删除元素时出错

3 个答案: