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

Question

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

单击删除按钮时，我将选定的复选框数据作为对象数组传递给我的 Controller

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

然后从服务器端的表中删除名称。这一切都很好，但是我如何在删除它们后从 DOM 中删除行？？我经历了这个 post它说明了如何从 DOM 中删除 ng-repeat 元素，但在这种情况下，通过将 $index 传递给 splice() 函数，一次删除一个元素

在我的例子中，我需要删除多行。如果我不得不在我的 Controller 中使用 splice 函数，我该如何从选定的行对象中获取索引？或者有没有更好的方法。

希望我的问题很清楚!

更新: jsFiddle

解决方案:好吧，我不得不稍微修改一下@wickY26 的答案以适应我的场景。这是我的更新 jsFiddle

我所做的是，在 delete() 中将代码更改为

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

Answer 1

您可以通过将 checkbox 与 ng-model 绑定(bind)来保留对象上的选定行，所以示例表 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>

并且如果您在 Controller 中定义一个函数，该函数遍历您的数据和拼接数组，则取决于 tableSelection 对象 bool 值...

更新

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

在我的示例中，您不能同时删除多行，因为每次您拼接data 数组中的元素时，您都移动了索引array 用于休息，所以正确的方法是从last index开始，

这里是新的CONTROLLER

  $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添加评论和其他一些功能......