How to delete an object from angularJs Model?

Question

I am trying to write a function that enables me to remove an item when the button is clicked. My ng-repeat is below :

<tr ng-repeat="x in myData.List">
            <td>{{x.name}}</td>
            <td>{{x.item}}</td>                
            <td><button type="submit" ng-click="delete(x.id)" class="button">Remove</button></td>
        </tr>

and my delete function is :

$scope.delete = function (id) {            
     var index = $scope.myData.List.indexOf(id);
     $scope.myData.List.splice(index,1);               
};

But problem is that it delete the last object. But I want delete a particular item. what should I do ?

can you provide your myData it is array of objects or simple array ? — squiroid
– squiroid, Commented Feb 19, 2015 at 11:56

Nicolai · Accepted Answer · 2015-02-19 11:54:00Z

4

You should use x instead of its id in .indexOf:

$scope.delete = function (x) {            
     var index = $scope.myData.List.indexOf(x);
     $scope.myData.List.splice(index,1);               
};

and

<button type="submit" ng-click="delete(x)" class="button">Remove</button>

answered Feb 19, 2015 at 11:54

Nicolai

1,9531 gold badge24 silver badges32 bronze badges

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

2 Comments

Drop Shadow Over a year ago

Its working but I need the id's value also . so how can i get that ?

Nicolai Over a year ago

@DropShadow, use x.id, i.e function(x){ console.log(x.id)}.

rafat · Accepted Answer · 2015-08-20 09:33:13Z

3

This in not a angular specific problem. Array Splice is related JavaScript array manipulation. Pass only the index x instead of x.id. So your html code will be..

<td><button type="submit" ng-click="delete(x)" class="button">Remove</button></td>

$scope.delete = function (x) {            
     var index = $scope.myData.List.indexOf(x);
     $scope.myData.List.splice(index,1);               
};

edited Aug 20, 2015 at 9:33

answered Aug 20, 2015 at 9:17

rafat

8272 gold badges10 silver badges26 bronze badges

Comments

ma08 · Accepted Answer · 2015-02-19 12:55:32Z

1

The problem is your myData.List is a collection of objects not ids. You need to search for the id

$scope.delete = function (id) {            
  var index=-1;
  for(;index<$scope.myData.List.length;index++){
   if($scope.myData.List.id===id)
     break;
  }
  if(index!==-1){
   $scope.myData.List.splice(index,1);               
  }
}

Or you can pass the object to the function as Nicolai posted

edited Feb 19, 2015 at 12:55

answered Feb 19, 2015 at 11:56

ma08

3,7643 gold badges26 silver badges36 bronze badges

Collectives™ on Stack Overflow

How to delete an object from angularJs Model?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related