Question

好像我找不到这个bug。如果我删除列表中的第一项，则删除最后一项。谁能看到我做错了什么？

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

如果您需要更多代码或其他解释，请告知我们。

Answer 1

您可以使用for循环迭代clientAdditionals，例如：

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

<强>更新

您可以向数组元素添加ID属性。所以：

$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++;     
}

然后可以将for循环调整为：

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

<强> UPDATE2

或者，如果您100％确定ID属性等于数组元素的位置，那么如果$scope.clientAdditionals[i].id == i，您可以省略for循环并执行此操作：

HTML：

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

控制器：

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

Answer 2

好的，这已经解决了。

该错误导致ng-model="item"中的数据。我已将其更改为ng-model="additional.selected"，删除项目现在可以使用。

AngularJS：在ng-repeat中删除项目时出错

2 个答案: