点击单个按钮删除多个ng-repeat元素

Question

我有一个表格，其中显示了如下图所示的项目名称，

在点击删除按钮时，我将所选复选框数据作为对象数组传递给我的控制器。

[{id:1,name:'Name 8'},{id:2,name:'Name 7'}]

然后在服务器端从表格中删除名称。这一切都很好，但是在删除它们之后如何从DOM中删除行？我阅读了这篇文章，其中说明如何从DOM中删除ng-repeat元素，但在那种情况下，元素是一个接一个地被删除的，通过将$index传递给splice()函数。

在我的情况下，我需要删除多行。如果我必须在我的控制器中使用splice函数，那么我如何从所选行对象中获取索引？或者有更好的方法吗？

希望我的问题清楚明了！

更新： jsFiddle 解决方案：嗯，我不得不稍微修改@wickY26的答案以适应我的情况。这是我的更新jsFiddle 我所做的是，在delete()中更改代码为

angular.forEach($scope.projects, function (row, index) {
            if($scope.projects[index].checked) {
                $scope.projects.splice(index,1);
            }            
        });

- VishwaKumar

---

你的 ng-repeat 绑定到一个作用域数组/对象上了吗？只需从该数组中剪切它，angular 双向绑定将自动删除这些行...或者我漏掉了什么？ - Jscti

是的，我正在传递所选复选框的对象数组，例如 - [{id:1,name:'Name 8'},{id:2,name:'Name 7'}]。 - VishwaKumar

请创建一个fiddle/plunkr。我猜你需要在删除事件监听器的末尾添加$scope.apply()。 - Alp

@Alp - 我已经在我的问题中更新了jsFiddle。 - VishwaKumar

Answer 1

您可以通过将checkbox与ng-model绑定来在对象上保留选定行，因此示例表格HTML应如下所示：

HTML

  <table class="table table-bordered">
    <tbody>
      <tr ng-repeat="row in data" ng-class="{'success' : tableSelection[$index]}">
        <td>
          <input type="checkbox" ng-model="tableSelection[$index]" />
        </td>
        <td ng-repeat="cell in row">
          {{cell}}
        </td>
      </tr>
    </tbody>
  </table>

如果您在控制器中定义一个函数，该函数遍历您的数据并根据tableSelection对象的布尔值来切割数组...

更新

在您的评论之后，我调试了我的代码，并发现我无法同时删除多行，因此我查看了我的代码并更改了其中的一部分...

在我的示例中，您不能同时删除多行，因为每次从data数组中切割一个元素时，您都会移动数组的索引，因此正确的方法是从最后一个索引开始。

这是新的控制器：

  $scope.removeSelectedRows = function() {
    //start from last index because starting from first index cause shifting
    //in the array because of array.splice()
    for (var i = $scope.data.length - 1; i >= 0; i--) {
      if ($scope.tableSelection[i]) {
        //delete row from data
        $scope.data.splice(i, 1);
        //delete rowSelection property
        delete $scope.tableSelection[i];
      }
    }
  };

我更新了我的PLUNKER，并添加了一些评论和其他功能...

- Poyraz Yilmaz

---

你的解决方案是有效的，但我的情况有所不同，我需要一个可以全选或取消全选的通用复选框。请查看我的jffiddle http://jsfiddle.net/LCC36/6/ - VishwaKumar

你可能刚刚拯救了我的工作，哈哈哈。谢谢！ - LOTUSMS