Using splice on dynamic array in Angular repeater

Question

I have an issue when trying to delete an object from an array using splice. I have an array that is dynamically created through a UI and stored in a scope variable called $scope.productAttributes.Products. This is an example of what it looks like...

[
{
    "ProductLabel":"Net",
    "Code":"ela",
    "Site":"SITE1"
},
{
    "ProductLabel":"Link",
    "Code":"eli",
    "Site":"SITE1"
},
{
    "ProductLabel":"24-port managed PoE switch",
    "Code":"24p",
    "Site":"SITE2"
},
{
    "ProductLabel":"Dedicated Firewall",
    "Code":"ded",
    "Site":"SITE2"
},
{
    "ProductLabel":"Link",
    "Code":"eli",
    "Site":"SITE3"
},
{
    "ProductLabel":"IPv4 Addresses",
    "Code":"ip4",
    "Site":"SITE3"
}
]

I then display that array in an angular repeater and group it by 'site' (which might be part of the problem)...

<div ng-repeat="(key, value) in productAttributes.Products | groupBy: 'Site'">
    <strong>{{key}}</strong>
    <div ng-repeat="site in value">
        <h4>{{site.ProductLabel}}</h4>
        <sapn href="" ng-click="deleteItem($index)" class="text-danger">Remove {{site.ProductLabel}}</span>
    </div>
</div>
</div>

On the delete button I pass in the index of the object and use the splice function...

 $scope.deleteItem = function (index) {
        $scope.productAttributes.Products.splice(index, 1);
};

So the issue is that the $index is always zero (I noticed this from a console.log) as I mentioned that I think it might be down to the groupBy but I am not sure. anyone know whats going wrong? Thanks

UPDATE:

It would seem the problem is with the $index in the nested repeater. So if the json above the structure would be...

SITE1:

Product: Net - $index: 0

Product: Link - $index: 1

SITE2:

Product: 24-port - $index: 0

Product: Dedicated - $index: 1

SITE3:

Product: Link - $index: 0

Product: IPV4 - $index: 1

So if I try to delete the IPV4 product in SITE3, it removes the LINK product in Site1 as it has the same $index. any ideas how I can fix that?

what about track by $index ? docs.angularjs.org/api/ng/directive/ngRepeat — Benjamin Poignant
– Benjamin Poignant, Commented Mar 30, 2015 at 10:14
Hey - thanks for your answer. I tried to that but it didnt work. when I added ng-repeat="site in value track by $index" it deletes the last object in the array — Jose the hose
– Jose the hose, Commented Mar 30, 2015 at 10:21
I've read at bit more on Track by and it seems it could be a fix. But I would need a unique identifier for each object in the array in order for it to work - right? — Jose the hose
– Jose the hose, Commented Mar 30, 2015 at 10:37

Sanjeev Singh · Accepted Answer · 2015-03-31 09:09:03Z

3

We can not rely on $index as it does not contain the updated value after you remove an item from array.

Pass the object dynamically from UI and delete it from model using below code:

In Html:

<div ng-repeat="(key, value) in productAttributes.Products | groupBy: 'Site'">
    <strong>{{key}}</strong>
    <div ng-repeat="site in value">
        <h4>{{site.ProductLabel}}</h4>
        <sapn href="" ng-click="deleteItem(site)" class="text-danger">Remove {{site.ProductLabel}}</span>
    </div>
</div>
</div>

In JavaScript:

$scope.productAttributes.Products.splice
    ($scope.productAttributes.Products.indexOf(site), 1);

This causes model to update with updates values in repeater and re-renders it on UI.

edited Mar 31, 2015 at 9:09

answered Mar 30, 2015 at 16:20

Sanjeev Singh

4,0963 gold badges36 silver badges39 bronze badges

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

Comments

Jose the hose · Accepted Answer · 2015-03-30 16:10:29Z

2

OK - I ended up doing it this way and it seems to work

$scope.deleteItem = function (item) {
        var index = $scope.productAttributes.Products.indexOf(item);
        $scope.productAttributes.Products.splice(index, 1);
    };

So passing in the whole object seems to have worked. I'm not sure why.

answered Mar 30, 2015 at 16:10

Jose the hose

1,89510 gold badges33 silver badges58 bronze badges

1 Comment

Sanjeev Singh Over a year ago

We both wrote the same at same time I guess. -- +1.:)

Collectives™ on Stack Overflow

Using splice on dynamic array in Angular repeater

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related