Question

我有以下页面（简单）：

正如您所看到的，在顶部我有一个输入，然后是<ul>，最后是一个保存更改的按钮。我的<ul>绑定了一个items数组。用户点击Uloz zmeny（保存更改）后，我会触发ng-click="vm.SaveChanges()"，如下所示：

    vm.SaveChanges = function () {
        angular.forEach(vm.items, function (value, key) {

            if (value.toRemove == true) {
                //remove item from the list

                var iIndex = vm.items.indexOf(value);
                vm.items.splice(iIndex, 1);
            };
        });
    };

其中vm在我的代码开头定义如下：

(function () {
    "use strict";

    angular.module("app-shopping").controller("itemsController", itemsController);

    function itemsController($http) {
        var vm = this;

        vm.items = [];.....more code after here

我的＆＃39;＆＃39;具有以下结构：

  {
    "id": 2,
    "orderId": 2,
    "text": "Item 2",
    "toRemove": true
  },

最后，当用户检查<li>我触发vm.toggleCompleted()下的项目时，它只是看起来像这样（它只是将当前项目的布尔状态从true更改为false，反之亦然）：< / p>

    vm.toggleCompleted = function (sItem) {
        sItem.toRemove = !sItem.toRemove;
    };

问题出现了：为什么当我运行此代码时，它不会删除数组中所有已检查的项目？例如，在这种特定情况下（见上图），它只会删除Item 2并跳过Item 3。我认为问题是由于从列表中删除Item 2时Item 3获取已存在的Item 2的索引，因此被跳过。这个假设是否正确？如果是，我如何更改代码以使其运行？

P.S。按照建议编辑我的代码：

        <li class="list-group-item" ng-repeat="sItem in vm.items">
            <div class="checkbox checkbox-success">
                <input id="ListItem{{$index}}" type="checkbox" placeholder="test placeholder" ng-model="sItem.toRemove" ng-click="sItem.toRemove=!sItem.toRemove" />
                <label for="ListItem{{$index}}">{{sItem.text}}</label>
            </div>
        </li>

Answer 1

我已按以下方式更改了代码，现在正在运行：

    vm.SaveChanges = function () {
        for (var i = vm.items.length - 1; i > -1; i--)
        {
            if (vm.items[i].toRemove == true)
            {
                vm.items.splice(i, 1);
            }
        }
    };

Answer 2

而不是在复选框输入位置使用toggleCompleted下面的

<input type="checkbox" ng-model="item.toRemove" ng-click="item.toRemove=!item.toRemove" />

并使用新的saveChanges方法..这应该可以正常工作..

Answer 3

是的，要绕过此问题，只需还原数组遍历，因为这样可以保证在删除过程中未检查元素的位置不会发生变化。

Answer 4

所以，你最后的代码应该是这样的：

模板：

<li class="list-group-item" ng-repeat="sItem in vm.items">
    <div class="checkbox checkbox-success">
        <input id="ListItem{{$index}}" type="checkbox" placeholder="test placeholder" ng-click="sItem.toRemove = !sItem.toRemove" />
        <label for="ListItem{{$index}}">{{sItem.text}}</label>
    </div>
</li>


<button class="btn btn-success" ng-click="SaveChanges()"> Save</button>

控制器：

$scope.SaveChanges = function () {

        for (var i = $scope.vm.items.length - 1; i > -1; i--){
            if ($scope.vm.items[i].toRemove) {
                $scope.vm.items.splice(i, 1);
            };
        }
}

从数组中删除项目会跳过某些项目

4 个答案: