How to remove an item from an array in AngularJS scope?

Question

Simple to-do list, but with a delete button on list page for each item:

Relevant template HTML:

<tr ng-repeat="person in persons"> <td>{{person.name}} - # {{person.id}}</td> <td>{{person.description}}</td> <td nowrap=nowrap> <a href="#!/edit"><i class="icon-edit"></i></a> <button ng-click="delete(person)"><i class="icon-minus-sign"></i></button> </td> </tr>

Relevant controller method:

$scope.delete = function (person) { API.DeletePerson({ id: person.id }, function (success) { // I need some code here to pull the person from my scope. }); };

I tried $scope.persons.pull(person) and $scope.persons.remove(person).

Although the database deleted successfully, I can not pull this item from scope and I do not want to make a method call to the server for data the client already has, I just want to remove this one person from scope.

Any ideas?

I run this whit $route, and the view won't work fine. I always got a empty page after I did the delete :-( — zx1986
– zx1986, Commented Sep 4, 2013 at 11:43
this is not so much about deleting from scope but rather from an array, and it would be the same regardless of angular, its just javascript — Xsmael
– Xsmael, Commented May 14, 2020 at 10:17

Joseph Silber · Accepted Answer · 2013-01-10 04:08:33Z

309

You'll have to find the index of the person in your persons array, then use the array's splice method:

$scope.persons.splice( $scope.persons.indexOf(person), 1 );

answered Jan 10, 2013 at 4:08

Joseph Silber

221k59 gold badges369 silver badges292 bronze badges

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

4 Comments

Andrew Kuklewicz Over a year ago

this is a better answer; works when the list has been filtered so that that index in the view is not the same as in the array in scope.

Joris Over a year ago

This is indeed the better answer. Note that in addition to the filtered lists use case mentioned by Andrew, this approach also covers the case in which you delete multiple persons and the Ajax requests for these deletes return out of order. If you have use the row indexes from before the Ajax call return, you'll end up removing the wrong rows.

daver Over a year ago

Is better in some cases, but with indexOf you have to iterate over all the items to find the right one, in the Josh answer you get the index and the item faster

Joseph Silber Over a year ago

@mike - Use this polyfill.

Josh David Miller · Accepted Answer · 2013-01-10 05:09:36Z

260

Your issue is not really with Angular, but with Array methods. The proper way to remove a particularly item from an array is with Array.splice. Also, when using ng-repeat, you have access to the special $index property, which is the current index of the array you passed in.

The solution is actually pretty straightforward:

View:

<a ng-click="delete($index)">Delete</a>

Controller:

$scope.delete = function ( idx ) { var person_to_delete = $scope.persons[idx]; API.DeletePerson({ id: person_to_delete.id }, function (success) { $scope.persons.splice(idx, 1); }); };

edited Jan 10, 2013 at 5:09

answered Jan 10, 2013 at 4:11

Josh David Miller

121k16 gold badges129 silver badges95 bronze badges

8 Comments

Josh David Miller Over a year ago

@ScottMalachowski You're right. I forgot that part. I revised my answer to reflect that, so it'll be consistent with yours.

shacker Over a year ago

Careful - this index-based solution will not work if you use multiple ng-repeats of the same object in a view (e.g. Scheduled Tasks, Unscheduled Tasks, Completed Tasks all coming out of $scope.tasks) because you will have multiple items with index 2, 3, 4, etc.

Andrew Kuklewicz Over a year ago

Comment above, by @shacker, about multiple ng-repeats with different filtered sets of the same array, is right on. Use method below with indexOf

Josh David Miller Over a year ago

@AndrewKuklewicz - indexOf can be a more expensive operation; without filtering, it's completely unnecessary. But with filtering, indexOf would be the appropriate method.

mikemil Over a year ago

I am struggling with this and had to make a minor change to the tag generation above - being - delete({{$index}}) with the {{ }} otherwise I got the string $index - BUT I have something wrong because it never calls that method. It does when I remove any mention of the index like delete() but that doesn't really help.

|

Community · Accepted Answer · 2020-06-20 09:12:55Z

I would use the Underscore.js library that has a list of useful functions.

`without`

without_.without(array, *values) 
Returns a copy of the array with all instances of the values removed.
_.without([1, 2, 1, 0, 3, 1, 4], 0, 1); // => [2, 3, 4] 

Example

var res = "deleteMe"; $scope.nodes = [ { name: "Node-1-1" }, { name: "Node-1-2" }, { name: "deleteMe" } ]; $scope.newNodes = _.without($scope.nodes, _.findWhere($scope.nodes, { name: res }));

See Demo in JSFiddle.

`filter`

var evens = _.filter([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; }); // => [2, 4, 6]

Example

$scope.newNodes = _.filter($scope.nodes, function(node) { return !(node.name == res); });

See Demo in Fiddle.

I'd probably use $scope.nodes = _.without($scope.nodes, node); because he has reference to the node
On modern browsers you can use Array.prototype.filter. _.filter(array, fun) becomes array.filter(fun).

cebor · Accepted Answer · 2013-09-11 18:07:47Z

$scope.removeItem = function() { $scope.items.splice($scope.toRemove, 1); $scope.toRemove = null; };

this works for me!

Community · Accepted Answer · 2017-05-23 10:31:39Z

If you have any function associated to list ,when you make the splice function, the association is deleted too. My solution:

$scope.remove = function() { var oldList = $scope.items; $scope.items = []; angular.forEach(oldList, function(x) { if (! x.done) $scope.items.push( { [ DATA OF EACH ITEM USING oldList(x) ] }); }); };

The list param is named items. The param x.done indicate if the item will be deleted.

Another references: Another example

Hope help you. Greetings.

gabn88 · Accepted Answer · 2015-04-14 18:29:08Z

For the the accepted answer of @Joseph Silber is not working, because indexOf returns -1. This is probably because Angular adds an hashkey, which is different for my $scope.items[0] and my item. I tried to resolve this with the angular.toJson() function, but it did not work :(

Ah, I found out the reason... I use a chunk method to create two columns in my table by watching my $scope.items. Sorry!

Chetann · Accepted Answer · 2016-01-04 09:12:19Z

You can also use this

$scope.persons = $filter('filter')($scope.persons , { id: ('!' + person.id) });

Ram · Accepted Answer · 2015-08-04 13:02:30Z

1

Angular have a built-in function called arrayRemove, in your case the method can simply be:

arrayRemove($scope.persons, person)

edited Aug 4, 2015 at 13:02

Ram

3,09110 gold badges43 silver badges57 bronze badges

answered Aug 1, 2013 at 5:37

Allen

3163 silver badges7 bronze badges

Comments

Taran · Accepted Answer · 2016-05-20 22:44:55Z

1

array.splice(array.pop(item));

answered May 20, 2016 at 22:44

Taran

3,24130 silver badges25 bronze badges

Comments

Cubiczx · Accepted Answer · 2018-03-02 07:43:49Z

To remove a element from scope use:

// remove an item $scope.remove = function(index) { $scope.items.splice(index, 1); };

From enter link description here

Collectives™ on Stack Overflow

How to remove an item from an array in AngularJS scope?

10 Answers 10

4 Comments

8 Comments

`without`

Example

`filter`

Example

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

4 Comments

8 Comments

Example

Example

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Related