使用angular-material的md-checkbox替换ui-grid的选择框

Question

我想使用angular-material的md-checkbox来替换ui-grid的选择框，但ng-model的{​​{1}}不正确这里是我的代码：< / p>

grid.selection.selectAll

当我点击'use strict'; angular.module "myApp" .run ['$templateCache' ($templateCache) -> $templateCache.put('ui-grid/selectionRowHeaderButtons', "<div class=\"ui-grid-selection-row-header-buttons \" ng-class=\"{'ui-grid-row-selected': row.isSelected}\" >" + "<md-checkbox style=\"margin: 0; vertical-align: middle\" ng-model=\"row.isSelected\" ng-click=\"row.isSelected=!row.isSelected;selectButtonClick(row, $event)\"></md-checkbox> &nbsp; </div>" ); $templateCache.put('ui-grid/selectionSelectAllButtons', "<div class=\"ui-grid-selection-row-header-buttons \" ng-class=\"{'ui-grid-all-selected': grid.selection.selectAll}\" ng-if=\"grid.options.enableSelectAll\"> <md-checkbox style=\"margin: 0; vertical-align: middle\" type=\"checkbox\" ng-model=\"grid.selection.selectAll\" ng-click=\"grid.selection.selectAll=!grid.selection.selectAll;headerButtonClick($event)\"></md-checkbox> </div>" ); ] 的复选框时，它无法正常工作

取消选择后，选择所有行

这是plunker

如果我使用selectionSelectAllButtons ，则效果很好

Answer 1

'$templateCache', function($templateCache) {

  $templateCache.put('ui-grid/selectionRowHeaderButtons', "<div class=\"ui-grid-selection-row-header-buttons \" ng-class=\"{'ui-grid-row-selected': row.isSelected}\" >" + "<md-checkbox style=\"margin: 0; vertical-align: middle\"  ng-model=\"row.isSelected\" ng-click=\"row.isSelected=!row.isSelected;selectButtonClick(row, $event)\"></md-checkbox> &nbsp; </div>");
  $templateCache.put('ui-grid/selectionSelectAllButtons', "<div class=\"ui-grid-selection-row-header-buttons \" ng-class=\"{'ui-grid-all-selected': grid.selection.selectAll}\" ng-if=\"grid.options.enableSelectAll\"> <md-checkbox style=\"margin: 0; vertical-align: middle\" type=\"checkbox\" ng-model=\"row.isSelected=grid.selection.selectAll\"  ng-click=\"grid.selection.selectAll=grid.selection.selectAll;headerButtonClick($event)\"></md-checkbox> </div>");
}

这有时会起作用

Answer 2

如下所示更改templateCache，效果很好。

$templateCache.put('ui-grid/selectionRowHeaderButtons', "<div class=\"ui-grid-selection-row-header-buttons \" ng-class=\"{'ui-grid-row-selected': row.isSelected}\" >" + "<md-checkbox style=\"margin: 0; vertical-align: middle\" ng-model=\"row.isSelected\" ng-click=\"selectButtonClick(row, $event);row.isSelected=!row.isSelected\"></md-checkbox> &nbsp; </div>"); $templateCache.put('ui-grid/selectionSelectAllButtons', "<div class=\"ui-grid-selection-row-header-buttons \" ng-class=\"{'ui-grid-all-selected': grid.selection.selectAll}\" ng-if=\"grid.options.enableSelectAll\"> <md-checkbox style=\"margin: 0; vertical-align: middle\" type=\"checkbox\" ng-model=\"grid.selection.selectAll\" ng-click=\"headerButtonClick($event);grid.selection.selectAll=!grid.selection.selectAll\"></md-checkbox> </div>");

这是Plunkle（https://plnkr.co/edit/0tO8VZrV0yAq0LHiY0rk?p=preview）