javascript - 在 AngularJS 中从数组中删除元素时出错

Question

我正在尝试删除 Angular 中的一个元素，但我得到了一个 从列表中删除元素后出现错误:[ngRepeat:dupes]。

我的 Controller :

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() 删除对象是正确的解决方案。

使用 track by $index 可以解决重复错误，但最终您的 html 中会出现空元素。

Here是 Angular 中 github 问题的链接，深入讨论了这种情况。 Angular 团队决定“保持原样”。

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