I Want To Delete Multiple Rows Selected From Table, Dom Is Changing But It Is Deleting Rows From Last On Html Page

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

Solution 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);
});

<tableid='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><buttonid='remove'>Remove</button>

Solution 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

Solution 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.

Solution 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];
           }
       }
 }];