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

Question

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

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

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

然后从服务器端的表中删除名称.这一切都很好,但如何在删除后删除DOM中的行？我阅读了这篇文章,其中介绍了如何从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

您可以通过绑定checkboxng-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>

如果你在你的控制器中定义一个函数,它通过你的数据和splice数组取决于tableSelection对象的布尔值......

UPDATE

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

在我的例子中,你不能同时删除多个行,因为每次从数组中拼接一个元素时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添加的评论和其他一些功能...