使用单项选择时隐藏 md-data-table 中的复选框

Question

如何在 md-on-select 中使用单个项目 selection Material Design Data Table for Angular Material 并隐藏复选框？我认为当我们可以 select 一项时，不再需要复选框，我想隐藏它们。

单个项目 selection 通过 selected 项目交换实现：

行内使用：

<tr md-row md-select="item" md-on-select="onSelect" ng-repeat="item in items"></tr>

onSelect 方法：

$scope.onSelect = function (item, key) {
  if($scope.selected.length >= 2) {
    $scope.selected.shift();
  }
}

当我使用 md-row-select="false" 时，我失去了 select 单行的能力。

如何隐藏复选框并且仍然 select 单行？

Answer 1

我前段时间创建的。

获取 git 存储库。

编辑files:mdSelect、mdHead

用于隐藏行复选框：mdSelect

在 mdSelect 和 mdHead 中添加内部 postLink 函数

function noCheckbox() {
  if(attrs.mdNoCheckbox === 'true') {
    return true;
  }      
  return false;
}

并在 mdSelect enableSelection:

中使用它

function enableSelection() {
  if(!noCheckbox()){
    element.prepend(createCheckbox());
  }

  if(autoSelect()) {
    element.on('click', toggle);
  }
}

mdHead attachCheckbox 内部：

function attachCheckbox() {
  ...
  if(!noCheckbox()){    
    children.eq(children.length - 1).prepend(createCheckBox());
  }
}

并将参数添加到范围 mdHead 和 mdSelect：noCheckbox: '@mdNoCheckbox'

编译并与

一起使用

<thead md-head md-no-checkbox ...
<tr md-row md-no-checkbox ...

和

<thead md-head md-no-checkbox="true" ...
<tr md-row md-no-checkbox="false ...

单行选择：

if (vm.options.singleRowSelect) {
      if (vm.selected.length >= 2) {
      vm.selected.shift();
   }
}

我会在这个周末发送 pull request。

Answer 2

您可以这样隐藏它们：

md-checkbox .md-icon {
    visibility: hidden;
}

使用单项选择时隐藏 md-data-table 中的复选框

Hide checkboxes in md-data-table when using single item selection

angularjs

angular-material