Remove item from array by pressing button

Question

I'm using angularJS to build a SPA. I am trying to delete an object from an array in my controller. I am using ng-repeat and can't seem to get my head around this. Here is the related html:

<div class="cat-button" ng-repeat="category in cats" category="category">
         <button class=" close-button" ng-click="removeCat()">
         <span class="glyphicon glyphicon-remove-sign" aria-hidden=true> </span> </button>{{category.name}}
</div>

This created a div with a button for every object that gets saved to my $scope.cats array. It works fine but I cant figure out how do I use the button in each div to delete that specific object.

When I click on the button , the function on my controller gets called, but this is where I get lost, how do I delete the specific object created dynamically by the user.

This is the related code on my controller:

 //Function to delete category

$scope.removeCat = function () {

   //I know I have to use splice on my array but how do I Identify the object that needs to be deleted from my array?



};

Have you tried [.splice()](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) — Rajesh, Jan 25 '16 at 07:24

score 2 · Accepted Answer · answered Jan 25 '16 at 07:26

2

You can either pass on $index like so:

<button class=" close-button" ng-click="removeCat($index)">

and in your function:

$scope.removeCat = function (index) {
    $scope.cats.splice(index,1);
}

or pass the whole item and use indexOf (the saver way)

<button class=" close-button" ng-click="removeCat(category)">

$scope.removeCat = function (item) {
    $scope.cats.splice(myArray.indexOf(item), 1);
}

answered Jan 25 '16 at 07:26

Martijn Welker

5,575
1
16
26

Be careful that not all browsers support indexOf. http://stackoverflow.com/questions/3629183/why-doesnt-indexof-work-on-an-array-ie8 – Daan van Hulst Jan 25 '16 at 07:39
True, but microsoft has dropped support for those browsers (not saying OP has), therefore .indexOf is the best option. – Martijn Welker Jan 25 '16 at 07:42
This answer worked for me but @DaanvanHulst just mentioned a potential problem. Is there wide support for the indexOf() function? – DominicanCoder Jan 25 '16 at 07:46
I disagree. It isn't for you to say which is the best option. I also didn't say it isn't a valid option. It really depends on the requirements you have. Just because Microsoft dropped support, doesn't mean that the entire world stops using them. Especially in big companies, they tend to be very slow with upgrading IE. – Daan van Hulst Jan 25 '16 at 07:48
@DominicanCoder https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf#Browser_compatibility – Martijn Welker Jan 25 '16 at 07:50

Daan van Hulst · Answer 2 · 2016-01-25T07:42:02.573

2

You can pass the index of the item you want to delete in the ng-click function:

<div class="cat-button" ng-repeat="category in cats" category="category">
         <button class=" close-button" ng-click="removeCat($index)">
         <span class="glyphicon glyphicon-remove-sign" aria-hidden=true> </span> </button>{{category.name}}
</div>

Then you can use this in your Angular controller like this:

$scope.removeCat = function (index) {
    $scope.cats.splice(index, 1);
};

Update

Incase you don't want to pass in the index, instead you can also pass in the entire object and locate the index in your controller. The code below is setup to work on all browsers. (Just haven't tested it ;) )

$scope.removeCat = function (cat) {
    // Using underscore
    var index = _.indexOf($scope.cats, cat);

    // Or using a for loop
    for(var i = 0; i < $scope.cats.length; i++) {
       //Assuming your cat object has an id property
       if($scope.cats.id === cat.id) {
           index = i;
           break;
       }
    }
};

Or any other way to locate the index of an object in an array.

edited Jan 25 '16 at 07:42

answered Jan 25 '16 at 07:26

Daan van Hulst

1,426
15
32

`$index` is not good option to work with. If you use isolate directive or `scope :true` directive in `ng-repeat` it won't provide you the current index – Anik Islam Abhi Jan 25 '16 at 07:29
@AnikIslamAbhi I am not sure I understand what you mean. I know that you can get issues with $index when working with filters (http://codeutopia.net/blog/2014/11/10/angularjs-best-practices-avoid-using-ng-repeats-index/). But how would an isolate scope affect $index? Curious to know :). – Daan van Hulst Jan 25 '16 at 07:46
well `$index` is property of `$scope` object of `ng-repeat` . When you use isolate scope or `scope : true` , it can pushed your `ng-repeat` scope 1 layer up of current scope or 1 layer below of current scope . – Anik Islam Abhi Jan 25 '16 at 07:51

score 1 · Answer 3 · answered Jan 25 '16 at 07:29

1

ng-click="removeCat(category)"

$scope.removeCat = function (categoryToDelete) {

    var index = $scope.cats.indexOf(categoryToDelete);
    $scope.cats.splice(index, 1);  

};

answered Jan 25 '16 at 07:29

DamianoPantani

1,168
2
13
23

Remove item from array by pressing button

3 Answers3