Clever Geek Handbook

I want to delete multiple rows selected from table, dom changes but removes rows from last one in html page

I want to delete multiple lines when a checkbox is selected in the right click menu, in my controller I can get the index and remove the values ​​from the DOM, but in the html page the values ​​are not removed according to the selection, but rather remove the rows from the 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 the controller the dom changes correctly, means the values ​​in $rootscope.rows

are removed according to 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 remove the line according to the selection and not the line from the last html page. Can someone please help me on this

0


source to share


4 answers


As you can see, this is very easy 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>
Run codeHide result


0


source


You are trying to delete an element inside iteration for(..)

, so after deleting any element the array will be reset and next time the wrong element will be deleted. This will only delete one element Not for mulitple .

You need to create a new array containing not removed elements , you can do this with filter

, for example

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


Note . Do not use $rootScope

because this is the global application layer corresponding to the corresponding controller$scope

Check Demo

0


source


What I was doing wrong was using the track. If we don't use track then angular keeps track of the objects and inserts the $$ hashkey with each object. So my logic worked after removing the track from ng-repeat in the HTML page.

0


source


You can add any unique column to the list of tables. NOte: If you don't have a unique column, add one. Maybe time

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


source






More articles:


All Articles