删除项目从Array跳过某些项目

我有以下页面（简单）：删除项目从Array跳过某些项目

正如你所看到的，在上面我有一个输入，然后<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 = 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>

来源

2016-07-11 Robert J.

你可以创建一个plunker吗？ – apaul

我认为你的假设是正确的。清除所有项目的巧妙方法是反向循环 - 从最高索引处开始并从那里移除。 – Zach

而不是使用toggleCompleted在复选框输入的地方

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

以下使用，并使用新的SaveChanges方法的。这应该能正常运行..

来源

2016-07-11 17:47:10

让我知道，如果它的工作原理 –

这看起来太棒了！我已经更改了代码，但是我无法再检查该项目（它总是未选中）。我已将代码添加到我的信息 –

你是否通过了我已经粘贴了评论的庞克..再次放置..http：//plnkr.co/edit/6tpG8Kr4vWyRlF5ZNtxs？p =预览。 ..如果你可以为你的问题创建一个示例plunk，我们可以很容易地帮助你进一步..只需使用一个静态对象，并创建..如果你是新的plunk创建它非常简单.. –

我已经改变了代码以下方式，它是现在工作：

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

来源

2016-07-11 17:42:33

罗伯特..看看我创造了几天就回来更好地了解复选框在AngularJS处理的普拉克..http：//plnkr.co/edit/6tpG8Kr4vWyRlF5ZNtxs P =预览 –

是，绕过这个问题，只是回复您的数组遍历，因为这你可以保证在删除期间没有未经检查的元素的位置发生变化。

来源

2016-07-11 17:45:34 Lemonade

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

模板：

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

来源

2016-07-11 18:45:02 Yoan

嗨Yoan，谢谢您的回答。但有一个问题 - 当你已经知道它的时候，你为什么要检索一个项目的索引 - 变量''i''是实际的索引。这对我来说没有任何意义 –

删除项目从Array跳过某些项目

回答

相关问题