Remove element from javascript object in angular repeat loop

Question

I have data in the following form:

$scope.cart={"4": {"cost": 802.85,  "description": "test", "qty": 1},
"5": {"cost": 802.85,  "description": "test", "qty": 1}};

I'd like to loop through this data and display it alongside remove button. How can I make the button remove the row from the scope and also trigger angular digest? All of the tutorials seem to have the data in array, and splicing that array, this does not fit my needs.

This is what I have so far: http://jsfiddle.net/wbebc4cd/1/

First of all the demo doesn't run. I also recommend to use Angular 1.3.x. — dfsq, Feb 18 '15 at 12:18
Because you forgot a comma after function expression. http://jsfiddle.net/wbebc4cd/4/ — dfsq, Feb 18 '15 at 12:35

score 3 · Accepted Answer · edited May 23 '17 at 12:30

3

As @dfsq mentioned, you have a typo in your function.

But more fundamentally, when repeating over the map, you should also remember the key. (See also How to use ng-repeat to iterate over map entries in AngularJS)

<tr ng:repeat="(key,item) in cart">

Then you can use the key to remove the item.

<td>[<a href ng:click="removeItem(key)">X</a>]</td>

http://jsfiddle.net/wbebc4cd/5/

edited May 23 '17 at 12:30

Community

1
1

answered Feb 18 '15 at 13:02

flup

26,937
7
52
74

You help me out of large problem ! – Sanjay Radadiya Sep 22 '17 at 08:40

score 1 · Answer 2 · answered Feb 18 '15 at 12:35

1

here is the correct code for getting the item removed.

function CartForm($scope) {
    $scope.cart=[{"id": 1, "cost": 802.85,  "description": "test", "qty": 1}, {"id": 2, "cost": 802.85,  "description": "test", "qty": 1}];


    $scope.removeItem = function(item) {
        var index = $scope.cart.indexOf(item);
        $scope.cart.splice(index, 1);

    }


}

answered Feb 18 '15 at 12:35

Dimi Takis

4,924
3
29
41

1

Yes, you can look up the value in the map. But I think it's clearer to store the key when iterating. – flup Feb 18 '15 at 13:05

score 0 · Answer 3 · edited Mar 20 '18 at 05:27

0

You could try something like:

$scope.removeItem = function(item) { 
    var newCart = {};
    angular.forEach($scope.cart, function(value, key){
        if(value != item)
            newCart[key] = value; 
    });

    $scope.cart = newCart;   
};

JSFiddle: http://jsfiddle.net/0v40rhfb/2/

edited Mar 20 '18 at 05:27

Mukesh Kalgude

4,814
2
17
32

answered Feb 18 '15 at 12:53

Nathan Heskia

17
4

Remove element from javascript object in angular repeat loop

3 Answers3