I want to delete multiple rows selected from table, dom is changing but it is deleting rows from last on html page

Question

I want to delete multiple rows on check box selection on right click menu option, in my controller am able to get index and delete the values from DOM, but on html page the values are not getting deleted as per the selection rather it is deleting the rows from last.

This is my controller.js

$scope.tableSelection = {};//used for getting checkbox selection
  ['Delete', function ($itemScope) {
       for (var i = $rootScope.rows.length - 1; i >= 0; i--) {
           if ($scope.tableSelection[i]) {
             //delete row from data
             $rootScope.rows.splice(i, 1);
             //delete rowSelection property
             delete $scope.tableSelection[i];
           }
       }
 }];

here in controller the dom is changing correctly, means the values in $rootscope.rows is getting deleted as per the selection.

This is my html page.

<div id="table" context-menu="menuOptions" ng-controller="dictionaryElementsController">
  <tbody>
        <tr ng-repeat="row in rows track by $index" ng-class="{'success' : tableSelection[$index]}">
        <td>
        <input type="checkbox" ng-model="tableSelection[$index]">
       </td>
           <td  ng-repeat="col in output_columns track by $index">
         &lt;enter data&gt;
       </td>
       <td ng-repeat="col in input_columns track by $index">
         &lt;enter data&gt;
       </td>

        </tr>
   </tbody>
</div>

what should i do to delete the row as per selection and not rows from last on html page. Can anyone please help me out in this

Answer 1

As you can see it is very simple using vanilla javascript.

 var table = document.getElementById('sample'); var remove = document.getElementById('remove'); remove.addEventListener('click', function(e){ table.deleteRow(0); }); 

 <table id='sample'> <tr><td>Cell 1,1</td><td>Cell 1,2</td><td>Cell 1,3</td></tr> <tr><td>Cell 2,1</td><td>Cell 2,2</td><td>Cell 2,3</td></tr> <tr><td>Cell 3,3</td><td>Cell 3,3</td><td>Cell 3,3</td></tr> </table> <button id='remove'>Remove</button> 

Answer 2

You are trying to remove item inside iteration for(..) so after removing any item, array will be reset and next time wrong item will be removed. This will work only single item deletion Not for mulitple .

You need to create new array which contain not removed items you can do it using filter like

$scope.removeSelectedItems = function () {
    $scope.rows = $scope.rows.filter(function (item, index) {
        return !($scope.tableSelection[index] !== undefined && $scope.tableSelection[index]);
    });
    $scope.tableSelection = {};
}

Note - Don't mess $rootScope because it is application level global use respective controller's $scope

Check the Demo

Answer 3

The thing i was doing wrong was using track by.. If we don't use track by then angular itself keep track of objects and insert $$hashkey with every object. So, my logic worked after removing track by from ng-repeat in HTML page.

Answer 4

You can add any unique column to the tableselection. NOte: If you do not have unique column add one. Could be timespan

    <div id="table" context-menu="menuOptions" ng-controller="dictionaryElementsController">
  <tbody>
        <tr ng-repeat="row in rows track by $index" ng-class="{'success' : tableSelection[$index]}">
        <td>
        <input type="checkbox" ng-model="tableSelection[row.Id]">
       </td>
           <td  ng-repeat="col in output_columns track by $index">
         &lt;enter data&gt;
       </td>
       <td ng-repeat="col in input_columns track by $index">
         &lt;enter data&gt;
       </td>

        </tr>
   </tbody>
</div>



 $scope.tableSelection = {};//used for getting checkbox selection
  ['Delete', function ($itemScope) {
       for (var i = $rootScope.rows.length - 1; i >= 0; i--) {
           if ($scope.tableSelection[$scope.row[i].UId]){
             //delete row from data
             $rootScope.rows.splice(i, 1);
             //delete rowSelection property
             delete $scope.tableSelection[i];
           }
       }
 }];