AngularJS: trouble deleting item within ng-repeat

Question

It seems I can not find this bug. If I delete first item in list, the last one gets deleted. Can anyone see what am I doing wrong?

HTML

<div ng-repeat="additional in clientAdditionals track by $index"> <div class="row"> <div class="form-group col-xs-6"> <ng-form name="additionalSelectFieldForm"> <select class="form-control" ng-options="item.label for item in clientAdditionalsSelectItems" name="additionalSelect" ng-model="item" ng-change="setClientAdditionals($index, item.name); validateClientAdditionals();" ng-required="true"></select> </ng-form> </div> <div class="form-group col-xs-6"> <div class="input-button-on-right"> <div class="withInput"> <ng-form name="additionalValueFieldForm"> <input type="text" class="form-control" name="additionalValue" ng-model="additional.value" ng-required="true" /> </ng-form> </div> <div class="withButton"> <button class="btn btn-primary circle" ng-click="deleteClientAdditionals(additional)"><span class="fa fa-times"></span></button> </div> </div> </div> </div> </div>

AngularJS

$scope.clientAdditionals = []; $scope.createClientAdditional = function(item) { $scope.clientAdditionals.push({ name : undefined, value : undefined }); }; $scope.setClientAdditionals = function(index, name) { $scope.clientAdditionals[index].name = name; } $scope.deleteClientAdditionals = function(additional) { $scope.clientAdditionals.splice($scope.clientAdditionals.indexOf(additional), 1); $scope.validateClientAdditionals(); };

If you need some more of the code or some extra explanation, please let me know.

If you put a console.log(additional) inside your deleteClientAdditionals function, what is the output? — Guinn
– Guinn, Commented Jun 22, 2015 at 15:20
Ah, so it's an unnamed object. Which is probably why indexOf() doesn't work. I'll answer with an alternative solution — Guinn
– Guinn, Commented Jun 22, 2015 at 15:32

Guinn · Accepted Answer · 2015-06-23 12:02:47Z

You could iterate through clientAdditionals with a for-loop, like:

for(var i=0; i < $scope.clientAdditionals.length; i++) { if($scope.clientAdditionals[i].name == additionals.name && $scope.clientAdditionals[i].value == additionals.value) { $scope.clientAdditionals.splice(i, 1); break; } }

Update

You could add an ID property to the array elements. so:

$scope.clientAdditionals = []; $scope.id = 0; $scope.createClientAdditional = function(item) { $scope.clientAdditionals.push({ id : undefined, name : undefined, value : undefined }); }; $scope.setClientAdditionals = function(index, name) { $scope.clientAdditionals[index].id = $scope.id; $scope.clientAdditionals[index].name = name; $scope.id++; }

Then the for loop could be adjusted to be:

for(var i=0; i < $scope.clientAdditionals.length; i++) { if($scope.clientAdditionals[i].id == additionals.id) { $scope.clientAdditionals.splice(i, 1); break; } }

Update2

Or, if you are 100% sure that the ID property is equal to the position of the array element, so if $scope.clientAdditionals[i].id == i, you could omit the for-loop and do this:

html:

<div class="withButton"> <button class="btn btn-primary circle" ng-click="deleteClientAdditionals(additional.id)"><span class="fa fa-times"></span></button> </div>

controller:

$scope.deleteClientAdditionals = function(index) { $scope.clientAdditionals.splice(index, 1); $scope.validateClientAdditionals(); };

I have tried with this solution and it fails with same issue. I did a test if code gets into for and into if statement - it does but still deletes the wrong one.
Are there more entries in the array with the same name/value? because it will delete the first hit, maybe that's where it goes wrong?
There is some same pairs in array, true. How could I solve this issue then?
Guinn, thank you for trying. I will try this solution although I wonder why is this not working with simple solution with delete($index) and then splice($index, 1).

be-codified · Accepted Answer · 2015-06-23 20:31:55Z

Ok, this has been resolved.

The bug was causing data in ng-model="item". I have changed it into ng-model="additional.selected" and deleting item now works.

Collectives™ on Stack Overflow

AngularJS: trouble deleting item within ng-repeat

2 Answers 2

9 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Related