ngGrid - 删除行

时间:2013-06-28 15:27:00

标签: angularjs ng-grid

我一直在寻找一个关于如何实现按钮来删除所选行的示例,但到目前为止我找不到任何有用的东西。

任何人都可以给我一个提示吗?这是plunker示例。

我实现的函数很奇怪,因为它删除了其他行。

谢谢。

6 个答案:

答案 0 :(得分:18)

这不是删除任何行的正确方法

试试这样:

$scope.removeRow = function() {
   var index = this.row.rowIndex;
   $scope.gridOptions.selectItem(index, false);
   $scope.myData.splice(index, 1);
};

PLUNKER -->其工作和测试

答案 1 :(得分:6)

感谢提示但是 我尝试了片段,它不起作用 所以我在

中改了它
var removeTemplate = '<input type="button" value="remove" ng-click="removeRow()" />';
$scope.removeRow = function() {;
                    var index = this.row.rowIndex;
                    alert(index);
                    $scope.gridOptions.selectItem(index, false);
                    $scope.items.splice(index, 1);
                };

它就像一个魅力:) 希望这有帮助。

答案 2 :(得分:3)

这可能会对您有所帮助,这也是为了删除网格中的多行。

$scope.mySelections = [];

$scope.gridOptions = {
    data :'gridData',
    selectedItems : $scope.mySelections,
    showSelectionCheckbox : true
}

$scope.deleteSelected = function() {
    angular.forEach($scope.mySelections, function(rowItem) { 
    $scope.gridData.splice($scope.gridData.indexOf(rowItem),1);
});
}

mySelections是已选择行的数组

答案 3 :(得分:2)

一旦对数组进行排序,此问题的上一个答案将无法运行,因为row.index会根据数组的排序方式而更改,但数组中的原始数据仍保留在原始数据中指数。我们必须在数据数组中找到正确的索引才能删除正确的行。该行包含对row.entity中原始数据的引用,因此我们可以使用indexOf来查找正确的索引。

$scope.actionTemplate = '<input type="button" value="Delete" ng-click="delete($event);" />';

$scope.delete = function($event) {
    $event.stopPropagation(); //keep the row from being selected
    $scope.data.selectAll(false); //remove all selections: necessary for issues with the selection array
    var index = $scope.data.indexOf(this.row.entity); //get the correct index to splice
    $scope.metrics.splice(index, 1); //remove the element
};

编辑:原始解决方案可能当时有效,但ng-grid已经更新,不再有效。

答案 4 :(得分:0)

它可能对你有帮助

<!doctype html>
<html ng-app="deleteApp">
<head>
  <title>Example - www.code-sample.com</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.1/angular.min.js"></script>
  <script>
    angular.module('deleteApp', [])
      .controller('deleteController', ['$scope', function ($scope) {
          $scope.Rows = [
            { row: 'RowCount1'},
            { row: 'RowCount2'},
            { row: 'RowCount3'},
            { row: 'RowCount4'},
            { row: 'RowCount5'}];

            $scope.delete = function(index){
              $scope.Rows.splice(index, 1);
            }
      }]);
  </script>
</head>
<body ng-controller="deleteController">
  <div ng-repeat="ro in Rows">
    <div>{{$index + 1}} :  {{ro.row}} <input type="button" value="delete" ng-click="delete($index)" /></div>
  </div>
</body>
</html>

答案 5 :(得分:0)

这有效:

showSelectionCheckbox:true - &gt;它将复选框添加到网格  和  $ scope.delItem = function() - &gt;它适用于多行或单行选择

     $scope.mySelections = [];
                 $scope.gridOptions = {
                     data :'data',
                     selectedItems : $scope.mySelections,
                     showSelectionCheckbox : true
                 } 

 $scope.delItem = function() {
      for (var i = 0; i < $scope.mySelections.length; i++) {
             var index = $scope.data.indexOf($scope.mySelections[i]);
             if (index != -1) {
                 $scope.data.splice(index, 1);
             }
         }
     }