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

Question

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

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

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

以下代码来 self 的 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 页面中的 Controller 调用的删除函数。

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

以下是我的 Controller (不是全部，只是最重要的部分)。 $scope.provider_medical_services 获取 json 数据并将其放入 ng-grid gridOptions 中。 阅读 ng-grid 文档后，我必须以某种方式从 selectedItems 数组传递复选框 id 并将其传递到 html 文档中的删除函数。或者，我只是这样做完全错误，因为我把它拼凑在一起。非常感谢解决方案和建议

  (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，我拿了他们的例子。我添加了一个删除所有选定的函数，以及其他人的删除当前行函数(这些是纯粹的 Angular 方式)来查看代码，将鼠标悬停在右上角<在jsbin中编辑>

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

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

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