Question

我想在右键菜单选项上的复选框选择中删除多行，在我的控制器中我能够获取索引并从DOM中删除值，但在html页面上的值不会根据选择而被删除而不是它正在删除最后一行。

这是我的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];
           }
       }
 }];

在控制器中，dom正在正确更改，表示$rootscope.rows中的值将根据选择被删除。

这是我的html页面。

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

我该怎么做才能删除按行选择的行而不是html页面上的最后一行。任何人都可以帮助我

Answer 1

正如您所看到的，使用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

您正尝试删除iteration for(..)内的项目，因此在删除任何项目后，数组将被重置，下次错误的项目将被删除。这仅适用于单个项目删除不适用于多种。

您需要创建包含未删除项的新数组，您可以使用filter来执行此操作

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

注意 - 不要混淆$rootScope，因为它是应用程序级全局使用各自的控制器$scope

检查Demo

Answer 3

我做错的事情是使用track by ..如果我们不使用track by那么angular本身跟踪对象并插入$$ hashkey与每个对象。因此，我的逻辑在HTML页面中从ng-repeat中删除跟踪后起作用。

Answer 4

您可以向表选择添加任何唯一列。注意：如果您没有唯一列添加一个。可能是时间跨度

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

我想删除从表中选择的多行，dom正在更改，但它正在删除html页面上的最后一行

4 个答案: