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

How can I use the selection of individual elements using md-on-select in the Material Data Table for Angular Material  and are the flags hidden? I think that when we can select one item, the checkboxes are no longer needed, and I want to hide them.

Highlighting individual elements achieved by replacing an element:

in using strings:

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

onSelect a method:

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

enter image description here

When I use md-row-select="false", I lose the ability to select one row.

How to hide checkboxes and select one row?

+4
source share
2 answers

You can hide them as follows:

md-checkbox .md-icon {
    visibility: hidden;
}
+1
source

.

git repo.

: mdSelect, mdHead

: mdSelect

postLink mdSelect mdHead

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();
   }
}

.

+1

Source: https://habr.com/ru/post/1628447/


All Articles