Angular JS UI-Grid删除行

Question

我是ui-grid的新手，我正在尝试在AngularJS中实现一个表，如下图所示。我正在尝试选择一行并使用该特定行上的删除按钮将其删除。 ui-grid文档要求我们使用gridApi，但我找不到相同的文档。

Answer 1

请参阅此处删除行的工作示例。 http://plnkr.co/edit/6TiFC6plEMJMD4U6QmyS?p=preview

关键是使用indexOf(row.entity)而不依赖于row.index，因为它不会动态更新。

$scope.deleteRow = function(row) {
  var index = $scope.gridOptions.data.indexOf(row.entity);
  $scope.gridOptions.data.splice(index, 1);
};

---

通用方法

function deleteRow(row,grid) {
   var i = grid.options.data.indexOf(row.entity);
   grid.options.data.splice(i, 1);
}

Answer 2

您可以使用@Blousie解决方案，使其适应较新的API：https://github.com/angular-ui/ng-grid/blob/master/3.0_UPGRADE.md

现在＆＃34; grid.appScope.edit（row.entity）＆＃34;让您可以访问您的范围＆＃34;编辑＆＃34;功能

这样的事情：

var removeTemplate = '<button class="btn btn-danger" ng-click="grid.appScope.removeRow(row)"><i class="glyphicon glyphicon-remove"></i></button>';

$scope.removeRow = function(row) {
    var index = $scope.<yourDataModelProperty>.indexOf(row.entity);
    if (index !== -1) {
        $scope.<yourDataModelProperty>.splice(index, 1);
    }
};

Answer 3

我们需要使用$ scope.grid.appScope。它适用于所有模板。除此之外，您需要从模板发送行对象，以便您可以从网格数据中删除该行。

jsfiddle：http://jsfiddle.net/3ryLqa9e/4/

  cellTemplate:'<button class="btn primary" ng-click="grid.appScope.Delete(row)">Delete Me</button>' 

  $scope.Delete = function(row) {
            var index = $scope.gridOptions.data.indexOf(row.entity);
            $scope.gridOptions.data.splice(index, 1);
        };

Answer 4

这里提供的其他解决方案对我没有用（可能是因为我最新的不同版本的ui-grid）。因此，从scope数组中删除元素对我有用。这甚至应该与其他版本的ui-grid一起使用，因为当数据发生变化时必须更新网格。 （感谢Angular !!!）

我正在使用lodash从数组中删除元素，这里是示例代码：

$scope.deleteRow = function(row){
    _.remove($scope.gridData, {
        id: row.id
    });
};

Answer 5

只需使用splice从ui-grid数据源模型中删除要删除的行。

例如

$scope.myGridOptions.data.splice(<YOUR ROW INDEX HERE>, 1);