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

Question

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

通过选择的项目交换实现单项选择：

在行使用中：

<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"时，我失去了选择单行的能力。

如何隐藏复选框并仍选择单行？

Answer 1

我不久前创建了它。

获取git repo。

编辑文件：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();
   }
}

我将在本周末发送拉请求。

Answer 2

你可以像这样隐藏它们：

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