在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)
答
使用方法Array.splice(指数,计数),以从数组作为删除元素任务是一组对象
答
在ng-repeat中使用trackby索引
ng-repeat="task in ListCtrl.tasks track by $index"
谢谢!使用Array.splice()解决问题 – nanndoj 2015-02-11 18:36:33