Ошибка удаления элемента из массива в AngularJS

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) - дубликаты - это два неопределенных значения.

Удаление объекта с помощью Array.splice() - правильное решение.

Использование трека по $ index решит ошибку дублирования, но вы получите пустые элементы в своем html.

Here - это ссылка на проблему github в угловом выражении, которая подробно обсуждает эту ситуацию. Угловая команда решила оставить его «как есть».

Here - ссылка на удаление определенного элемента из массива с помощью Array.splice().

Answer 2

использование Array.splice (индекс, количество), чтобы удалить элементы из массива в качестве Задача - это массив объектов

Answer 3

использование индекса trackby в нг-повтор

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