从阵列中删除项目会跳过某些项目

Question

I have the following page (simple):

As you can see, at the top I have an input, then <ul> and finally a button to save changes. My <ul> is bound to a array of items . Once user clicks Uloz zmeny (Save Changes) I am triggering ng-click="vm.SaveChanges()" which looks like following:

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

where vm is defined as following at the beginning of my code:

(function () {
    "use strict";

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

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

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

Every item under my '' has the following structure:

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

Finally, when user checks an item under the <li> I am triggering vm.toggleCompleted() which simply looks like this (it simply changes a boolean state of current item from true to false or vice versa):

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

Here comes the question: Why when I run this code it does not remove all checked items in the array? For example in this specific case (see image above) it would only remove Item 2 and skip Item 3 . I believe that the problem is caused by the fact that when Item 2 is remove from the list, Item 3 takes the index of already existing Item 2 and therefore is skipped. Is this assumption correct? If yes, how do I need to change the code to make this run?

PS Edit to my code as recommended:

        <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

I have changed the code the following way and it is working now:

    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

Instead of using toggleCompleted use below at the place of check-box input

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

And Use your new saveChanges method .. this should work fine..

Answer 3

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

Answer 4

So, you code at the end should be like that:

Template:

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

Controller:

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