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

Question

我想用angular-material的md-checkbox来替换ui-grid的select框，但是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 的复选框时，它不起作用

在我取消 select 之后，它 select 所有行

这里是 plunker

如果我用<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.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>   </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)

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

Using angular-material's md-checkbox to replace ui-grid's select box

angularjs

angular-material

ui-grid