Is there any version of Angular Material md-select with select all option

Question

I have been using Angular Material in one of my project. Suddenly I realized the need for having a select all option on md-select. I think I will pull a git request for the same.

However, currently I am looking for a similar drop down structure with checkboxes (like md-select multiple) but also a select all option.

I am aware that I can push a dummy empty entry into md-select option array and manipulate reverse way on its selection. But it would require a lot of code change in my current structure and would also not be a elegant thing to do.

I tried looking for it in bootstrap and jQuery-UI, but could not find one yet. Is there any such control known to anyone. Any redirection will be helpful.

Answer 1

You can do that easily inside the HTML. It requires only one line of code, or two lines, if you want a "select none" option as well. For example

<md-input-container>
  <label>Users</label>
    <md-select ng-model="selectedUser" multiple="" 
               ng-model-options="{trackBy: '$value.id'}">
      <md-optgroup label="Users">
      <md-option ng-repeat="user in users" 
                 ng-value="user">{{ user.name }}</md-option>
      </md-optgroup>
    </md-select>
</md-input-container>
<button ng-click="selectedUser=users">all</button>
<button ng-click="selectedUser=[]">none</button>

Example in Plunker.

Edit: I updated the below Plunker to show the "all" button inside the select box next to the "Users" optgroup title. The relevant change:

    <md-select ng-model="selectedUser" multiple="" ng-model-options="{trackBy: '$value.id'}">
      <button ng-click="doSelectedUser()" style="float:right">all</button>
      <md-optgroup label="Users">