Question

我有一个带有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页面中的控制器调用的delete函数。

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: []

   };

Answer 1

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

{{$ index}}是您可以在ng-repeat

中使用的变量

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

我刚看了一下ng-grid，我就是他们的榜样。我添加了删除所有选中的功能，以及有人删除当前行功能（这些是纯角度方式）来查看代码，将鼠标悬停在右上角＆lt;在jsbin＆gt;中编辑

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

老实说，我不喜欢这样，你最好使用像lodash这样的东西来管理你的数组并做你自己的自定义网格。使用foreach查找行索引效果不佳。

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

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

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

2 个答案: