单击一个按钮即可删除多个ng-repeat元素

Question

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

在删除按钮上单击，我将选定的复选框数据作为对象数组传递给我的控制器

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

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

在我的情况下，我需要删除多行。如果生病必须在我的控制器中使用拼接功能，我如何从所选行对象中获取索引？或者有更好的方法。

希望我的问题很明确！

更新： jsFiddle

解决方案：我不得不修改@ wickY26的答案以适应我的方案。这是我的更新jsFiddle

我所做的是，删除（）更改代码

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

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数组的元素时，移动数组的索引休息，所以正确的方法从最后一个索引，

开始

这里有新的 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添加的评论以及其他一些功能......