单击一个按钮即可删除多个ng-repeat元素 [英] Delete multiple ng-repeat elements on click of a single button

问题描述

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

I have a table showing project names as shown in below image ,

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

On delete button click, I am passing the selected check-boxes data as array of objects to my controller

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

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

Then deleting the names from the table at the server side. This all works fine but how do i remove the rows from DOM after deleting them?? I went through this post which says how to remove ng-repeat elemets from DOM but in that case the elements are removed one at a time, by passing the $index to the splice() function

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

In my case i need to remove multiple rows. If ill have to use the splice function in my controller how do i get the index from the selected rows object? Or is there any better way of doing it.

希望我的问题很明确！

更新： jsFiddle

解决方案：我不得不修改@ wickY26的回答有点适合我的方案。这是我的更新 jsFiddle

Solution: Well i had to modify @wickY26 answer a bit to suite my scenario. Here is my update jsFiddle

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

What i did was , in the delete() change code to

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

推荐答案

您可以通过绑定在对象上保留选定的行复选框使用ng-model，
所以示例表html应该是这样的

You can keep selected rows on an object via binding checkbox with ng-model, so example table html should be like this

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 对象布尔值...

and if you define a function in your controller which travel through your data and splice array depends on tableSelection object boolean values...

更新

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

after your comment I debug my code and see I cannot remove multiple rows same time, so I look at my code and change some part of it...

在我的示例中您不能同时删除多行，因为每次拼接元素来自数据数组时，您转移索引数组用于休息，所以正确的方法是从最后一个索引开始，

at my example you cannot delete multiple rows same time because everytime you splice an element from data array you shift indexes of array for rest, so right way to do it starting from 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 还添加了评论和其他一些功能......

I update my PLUNKER added comments and some other functionallty as well...

这篇关于单击一个按钮即可删除多个ng-repeat元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！