CODEWITHSUNDEEP
angularjs-ng-repeat
be-codified
be-codified

Reputation: 6124

AngularJS: trouble deleting item within ng-repeat

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.

Upvotes: 2

Views: 330

Answers (2)

be-codified
be-codified

Reputation: 6124

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.

Upvotes: 0

Guinn
Guinn

Reputation: 1385

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();
};

Upvotes: 1

Related Questions