daniel-nagy / md-data-table

Material Design Data Table for Angular Material
MIT License
1.9k stars 519 forks source link

Override scope.toggleAll function in mdHead #454

Open wuchiachong opened 8 years ago

wuchiachong commented 8 years ago

How to override the function of scope.toggleAll in mdHead directive? Say, I want to make it to angular.noop

elsewares commented 7 years ago

+1 for this. Right now, I can't specify custom logic for the toggle-all checkbox at all.

samal-rasmussen commented 7 years ago

Ok I needed this, so I did some jquery hacking inside the $postLink hook on my component:

this.$timeout(() => {
  const jqElement = $(this.$element);
  const selectAllCheckbox = jqElement.find('thead md-checkbox');
  selectAllCheckbox.off('click');
  selectAllCheckbox.on(
    'click',
    () => {
      if (this.selected.length === this.items.length) {
        this.selected.length = 0;
      } else {
        this.selected = this.items;
      }
      this.$scope.$digest();
    }
  );
}, 0);

Notice that the jquery find selector assumes that there is only one table in your component. You might have to customize the selector if you have more.

The $timeout was necessary in order to find the md-select. I'm doing some more sideeffects that I removed from the code snipped, but you can add your own just as you please :)

I didn't try with just the built in angular jquery lite functions, so I have no idea if you can get by with just those.