Error removing element from array in AngularJS

Question

I'm trying to delete an element in Angular but i'm getting an Error: [ngRepeat:dupes] after delete an element from list.

My 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];
    }
}]);

My view:

  <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>

the stack:

 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)

Community · Accepted Answer · 2017-05-23 12:29:39Z

2

ng-repeat uses an incremental counter to enumerate arrays. By removing a key in the middle of your array, angular will consider that element undefined. One will not be a problem, but two will cause duplicates (you can't have two elements with the same value in ng-repeat) - the duplicates being two undefined values.

Removing the object with Array.splice() is the correct solution.

using track by $index will solve the duplication error, but you'll end up with empty elements in your html.

Here is a link to the github issue in angular that discusses this situation in depth. The angular team has decided to leave it "as is".

Here is a link to how to remove a specific element from an array with Array.splice().

edited May 23, 2017 at 12:29

CommunityBot

11 silver badge

answered Feb 11, 2015 at 18:27

Joe Enzminger

11.2k3 gold badges54 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Raulucco · Accepted Answer · 2015-02-11 18:23:29Z

1

use Array.splice(index, count) to remove elements from an array as task is an array of objects

answered Feb 11, 2015 at 18:23

Raulucco

3,4261 gold badge23 silver badges27 bronze badges

Comments

A.B · Accepted Answer · 2015-02-11 18:26:04Z

0

use trackby index in ng-repeat

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

answered Feb 11, 2015 at 18:26

A.B

20.5k3 gold badges43 silver badges74 bronze badges

Collectives™ on Stack Overflow

Error removing element from array in AngularJS

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related