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

Question

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

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

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

然后从服务器端的表中删除名称。这一切都很好，但我如何在删除它们后从 DOM 中删除行？我浏览了这个post，它说如何从 DOM 中删除 ng-repeat 元素，但在这种情况下，通过将 $index 传递给 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 绑定来将选定的行保留在对象上， 所以示例表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 添加了 cmets 和其他一些功能......