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

Question

我想使用角度材质的md-checkbox替换ui-grid的选择框，但是grid.selection.selectAll的ng-model不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>"
    );
]

当我单击selectionSelectAllButtons复选框时，它不起作用

在取消选择之后，它将选择所有行

这是the 子

如果我使用<input type='checkbox'> ，那么效果很好

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 ）