Encountering an issue with deleting an object from an array using splice. The array, dynamically created through a UI, is stored in $scope.productAttributes.Products. Here's an example of the array structure...
[
{
"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"
}
]
The array is displayed using an angular repeater grouping it by 'site'...
<div ng-repeat="(key, value) in productAttributes.Products | groupBy: 'Site'">
<strong>{{key}}</strong>
<div ng-repeat="site in value">
<h4>{{site.ProductLabel}}</h4>
<span href="" ng-click="deleteItem($index)" class="text-danger">Remove {{site.ProductLabel}}</span>
</div>
</div>
</div>
A delete button triggers the splice function using the passed index...
$scope.deleteItem = function (index) {
$scope.productAttributes.Products.splice(index, 1);
};
The issue arises with $index always being zero due to nested repeater's structure. Any suggestions on how to rectify this?
UPDATE:
Issue seems related to $index in the nested repeater as shown below...
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
Deleting IPV4 mistakenly removes LINK in SITE1 due to same $index. Suggestions for a solution?