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

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

我的''下的每个项目都有以下结构：

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

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

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

问题来了：为什么当我运行这段代码时，它没有删除数组中的所有选中项？例如，在这种特定情况下（见上图），它只会删除Item 2 并跳过Item 3。我相信这个问题是由于当Item 2 从列表中删除时，Item 3 采用已经存在的Item 2 的索引，因此被跳过。这个假设正确吗？如果是，我需要如何更改代码才能使其运行？

附：按照建议编辑我的代码：

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