ngGrid - remove row | 易学教程

问题

I have been looking for an example on how to implement a button to remove a selected row, but I couldn't find anything useful so far.

Can anyone please give me a hint? Here is the plunker example.

The function I implement acts weird, as it removes other rows.

Thank you.

回答1:

That is not a proper way to delete any row

Try like this:

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

PLUNKER --> Its working and tested

回答2:

thanks for the hint but I tried the snippet and it doesn't work so I changed it in

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

and it works like a charme :) Hope this help.

回答3:

This might help you, and also this is for deleting multiple rows in the grid.

$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 is the array which has selected rows

回答4:

Previous answer to this question won't work once the array has been sorted because the row.index changes based on the way the array has been sorted but the original data in the array remains in it's original index. We must find the correct index in the data array in order to remove the correct row. The row contains a reference to the original data in row.entity so we can use indexOf to find the correct index.

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

Edit: The original solution may have worked at the time but ng-grid has since been updated and it no longer works.

回答5:

It might help you

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

回答6:

This works:

showSelectionCheckbox : true ->it adds checkbox to grid and $scope.delItem = function() -> it works for both multiple rows or single row selection

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

来源：https://stackoverflow.com/questions/17368314/nggrid-remove-row

标签

angularjs

ng-grid