How to remove searched entry from array in AngularJS

Question

I am creating a angular application, which has one li with ng-repeat and a text box for searching the out put in ng-repeat, the repeated item has a delete "X" button which deletes the record from DB. problem i am facing is how to remove searched record from the array using splice.

http://plnkr.co/edit/oPBofD2wL2ZUrD23f8Rr?p=preview

go to above plnkr click on any of the "x" without searching, then it will get removed from the list . but when you search for something lets say ruby then only ruby will come into the list but by clicking on "x" it will still appear . I need help in removing the searched field from the array using array operation, i dont want to regenerate that array again.

Why should I visit plunker? Questions at SO should be complete. Always post you code here. — Satpal
– Satpal, Commented May 15, 2014 at 6:53

Satpal · Accepted Answer · 2014-05-15 06:55:36Z

5

instead of just using the index as a parameter, calculate your index with a search of the json element in the array.

Like so:

$scope.delete = function(project) {
  idx = $scope.projects.indexOf(project);
  $scope.projects.splice(idx, 1);
};

DEMO

edited May 15, 2014 at 6:55

Satpal

134k13 gold badges168 silver badges171 bronze badges

answered May 15, 2014 at 6:50

minime

3443 silver badges10 bronze badges

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

2 Comments

Satpal Over a year ago

I have added plunker link with your question, Reveret back if you don't want that

Mayur Randive Over a year ago

Thanks a lot it is working fine .. so out of indexOF solution and beow solution by passing ID , which one is efficient $scope.delete = function(idx) { for ( var i = 0; i < $scope.projects.length; i++){ if ($scope.projects[i].id === idx) { $scope.projects.splice(i, 1); } } };

ivarni · Accepted Answer · 2014-05-15 06:51:58Z

2

The problem is that your idx is set to $index. That is the index of the ng-repeat, not the index of the array so when the list is filtered you're now deleting the wrong element. (You'll notice this if you clear the search-box after deleting)

If you change your HTML to

<a href="" ng-click="delete(project)">X</a>

The delete function will receive the actual element that needs to be removed and can be rewritten to

$scope.delete = function(project) {
  $scope.projects.splice($scope.projects.indexOf(project), 1)
};

answered May 15, 2014 at 6:51

ivarni

17.9k17 gold badges79 silver badges94 bronze badges

2 Comments

Mayur Randive Over a year ago

Thank you very much .. it worked can u pls tell me which one is efficient finding index of the passed project or the one which Nadhish has posted ?

ivarni Over a year ago

See also stackoverflow.com/questions/6682951/…

Nidhish Krishnan · Accepted Answer · 2014-05-15 06:58:40Z

1

The reason is that you are sending the $index for removing, instead of that pass the id like

 <a href="" ng-click="delete(project.id)">X</a>

Working Demo

Try this out

$scope.delete = function(idx) {
  for ( var i = 0; i < $scope.projects.length; i++){
    if ($scope.projects[i].id === idx)
     {
         $scope.projects.splice(i, 1);
     }
  }
};

edited May 15, 2014 at 6:58

answered May 15, 2014 at 6:52

Nidhish Krishnan

20.8k6 gold badges67 silver badges78 bronze badges

1 Comment

Mayur Randive Over a year ago

Thank you very much this worked, but not sure which one is efficient ..please see below solutions as well

Collectives™ on Stack Overflow

How to remove searched entry from array in AngularJS

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related