从按钮的 ng-grid 表中删除行答案

【问题标题】：delete row(s) from ng-grid table from button从按钮的 ng-grid 表中删除行
【发布时间】：2014-07-10 03:30:56
【问题描述】：

我有一个带有 ng-grid 的表，问题是我不确定如何收集选定的行 ID 或变量以传递给我的删除函数。

这是我正在尝试做的快速模型

http://plnkr.co/edit/zy653RrqHmBiRJ7xDHlV?p=preview

以下代码来自我的 html，一个可点击的删除按钮，它接受 2 个参数、复选框 ID 数组和对应表的索引。这个删除方法是从本教程中获得的：http://alexpotrykus.com/blog/2013/12/07/angularjs-with-rails-4-part-1/

 <div class="btn-group">
  <button class="my-btn btn-default button-row-provider-medical-services" ng-click="deleteProviderMedicalService([], $index)">Delete</button>
  </button>
</div>
 <div class="gridStyle ngGridTable" ng-grid="gridOptions">
 </div>

以下代码从 url 中获取 json 数据，查询并返回。它还包含从 html 页面中的控制器调用的删除函数。

app.factory('ProviderMedicalService', ['$resource', function($resource) {
function ProviderMedicalService() {
this.service = $resource('/api/provider_medical_services/:providerMedicalServiceId', {providerMedicalServiceId: '@id'});
};

ProviderMedicalService.prototype.all = function() {
return this.service.query();
};


ProviderMedicalService.prototype.delete = function(providerId) {
this.service.remove({providerMedicalServiceId: providerId});
};

return new ProviderMedicalService;
}]);

以下是我的控制器（不是所有内容，只是最重要的部分）。 $scope.provider_medical_services 获取 json 数据并将其放入 ng-grid gridOptions。在阅读了 ng-grid 文档之后，我必须以某种方式从 selectedItems 数组中传递复选框 id，并将其传递到 html doc 到 delete 函数。或者，我只是做错了，因为我一起破解了这个。非常感谢您的解决方案和建议

  (function() {
  app.controller('ModalDemoCtrl', ['$scope', 'ProviderMedicalService', '$resource', '$modal', function($scope, ProviderMedicalService, $resource, $modal) {


 var checkBoxCellTemplate = '<div class="ngSelectionCell"><input tabindex="-1" class="ngSelectionCheckbox" type="checkbox" ng-checked="row.selected" /></div>';

 $scope.provider_medical_services = ProviderMedicalService.all();

 $scope.deleteProviderMedicalService = function(ids,idx) {
  $scope.provider_medical_services.splice(idx, 1);
  return ProviderMedicalService.delete(ids);
 };

 $scope.gridOptions = {
    columnDefs: [
     {
        cellTemplate: checkBoxCellTemplate,
        showSelectionCheckbox: true
      },{
        field: 'name',
        displayName: 'CPT Code/Description'
      },{
        field: 'cash_price',
      displayName: 'Cash Price'
      },{
        field: 'average_price',
        displayName: 'Average Price'
      },

     ],
     data: 'provider_medical_services',
     selectedItems: []

   };

【问题讨论】：

标签： javascript jquery ruby-on-rails json angularjs

【解决方案1】：

我认为最简单的选择是将（数组索引）作为数据 ID 传递给您的 dom，您可以从那里选择它。

{{$index}} 是一个可以在 ng-repeat 中使用的变量

======= 忽略我上面所说的，因为我通常会编写自己的自定义内容 ======

我只是看了一下 ng-grid，我以他们为例。我添加了删除所有选定的功能，以及其他人删除当前行功能（这些是纯角度方式）来查看代码，将鼠标悬停在右上角

http://jsbin.com/huyodove/1/

老实说，我不喜欢这种方式，你最好使用 lodash 之类的东西来管理你的数组并做你自己的自定义网格。使用 foreach 查找行索引性能不佳。

在他们的文档中，它说您可以更改行模板，并且应该更改，因此您可以将 {{index}} 添加到该行，并通过该索引过滤数据，而不是更好一点。无论如何，请注意过滤表格后删除单元格。

【讨论】：

你是说在html页面的ng-grid中使用ng-repeat？
删除所有选择，没有按预期工作？
它不起作用？对我有用，重要的是部分，您可以从 angular.forEach($scope.gridOptions.$gridScope.selectedItems, （代码中的最后一个函数）中找到所有选定的行，而不是查看 $scope.data数组来查找匹配并获取该索引，因此您可以将其从 $scope.data 中删除，但我写的例子似乎工作，所以它不需要这样做。

【解决方案2】：

我不太明白你的问题，但你可以访问 ng-grid 的 selectedItems，如下所示：$scope.gridOptions.$gridScope.selectedItems（有关更多信息，请参阅 ng-grid API信息，但从技术上讲，此数组包含多个模式下的选定项目列表 - 或单个模式下只有一个项目）

对于您的情况，deleteAll() 函数可能是这样的：

$scope.deleteAll = function() {
  $scope.myData = [];
}

删除选中项的delete()函数可以是：

$scope.delete = function() {
  $.each($scope.gridOptions.$gridScope.selectedItems, function(index, selectedItem) {
    //remove the selected item from 'myData' - it is 2-ways binding to any modification to myData will be reflected in ng-grid table
    //you could check by either name or unique id of item
  });
}

【讨论】：