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'}]

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.

Hope my question is clear!

Update: 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);
            }            
        });

回答1:

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>

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

UPDATE

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,

Here new 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];
      }
    }
  };

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

来源：https://stackoverflow.com/questions/22527655/delete-multiple-ng-repeat-elements-on-click-of-a-single-button

标签

javascript

angularjs