是否有任何版本的 Angular Material md-select 带有全选选项答案

【问题标题】：Is there any version of Angular Material md-select with select all option是否有任何版本的 Angular Material md-select 带有全选选项
【发布时间】：2016-08-05 12:26:04
【问题描述】：

我一直在我的一个项目中使用 Angular Material。突然间，我意识到需要在 md-select 上有一个全选选项。我想我会为此拉一个 git 请求。

但是，目前我正在寻找一个类似的带有复选框的下拉结构（如 md-select multiple），但也是一个全选选项。

我知道我可以将一个虚拟的空条目推送到 md-select 选项数组中，并在其选择时以相反的方式操作。但这需要对我当前的结构进行大量代码更改，而且也不是一件优雅的事情。

我尝试在 bootstrap 和 jQuery-UI 中寻找它，但还没有找到。有没有人知道的任何此类控制。任何重定向都会有所帮助。

【问题讨论】：

我猜你需要使用带有自动完成功能的 md-chips。多选在材料设计中看起来不正确，而且可能在触摸屏中使用起来很糟糕。
@Velasquez：我怀疑你的理解是否正确。我正在寻找可以一键或一键从下拉列表中选择所有值的东西。例如，在 Gmail 中，我们可以单击顶部的复选框来选择该页面上的所有邮件
好的，我知道了。也许您可以在之前添加一个 Select All

标签： drop-down-menu angular-material multipleselection

【解决方案1】：

您可以在 HTML 中轻松做到这一点。如果您还想要“选择无”选项，它只需要一行代码或两行代码。例如

<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.

编辑：我更新了下面的 Plunker 以在“用户”选项组标题旁边的选择框中显示“全部”按钮。相关变化：

    <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">

【讨论】：

@C14L ：当然可以；但这不是我要找的..我想要的是您提供的按钮（或复选框）位于下拉菜单中（可能在您的用户标签之外）。 Angular 材料会动态构建下拉列表，因此我无法实现它
@SaurabhTiwari 我更新了 Plunker。您可以简单地将按钮放在 optgroup 标题上方的 md-select 和 float:right 内。
我对你的 plunker 做了一些改动。希望您愿意查看它们：<md-input-container> <label>Users</label> <md-select ng-model="selectedUser" multiple="" ng-model-options="{trackBy: '$value.id'}"> <md-checkbox ng-click="doSelectedUser()" style="float:left"></md-checkbox> <md-optgroup label="[SelectAll]"> <md-option ng-value="user" ng-repeat="user in users">{{ user.name }}</md-option> </md-optgroup> </md-select> </md-input-container>
还有这个在脚本$scope.doSelectedUser = function () { if($scope.selectedUser.length > 0) $scope.selectedUser = []; else $scope.selectedUser = $scope.users; }
这使它更符合我最初的要求。感谢您提供正确的方向。我希望稍加修改，这应该可以达到目的。另外，如果您可以通过上述更改修改您的 plunker，我将不胜感激，以防其他用户使用。