AngularJS 材质 - 使用 md 选项显示/隐藏元素答案

【问题标题】：AngularJS Material - Show/hide elements with md-optionAngularJS 材质 - 使用 md 选项显示/隐藏元素
【发布时间】：2018-04-25 21:26:08
【问题描述】：

我正在尝试构建一个带有复选框的下拉菜单，这些复选框在使用 AngularJS Material 选中/取消选中时显示/隐藏某些元素。

通常我会在复选框上使用md-checkbox 和ng-model 的组合，在要显示或隐藏的元素上使用ng-show，但我正在尝试使用Select Header 来做到这一点，如图所示在 AngularJS Material 网站上，它不起作用。

代码如下：

<md-select ng-model="filters" multiple>
    <md-select-header>
        <input placeholder="" class="md-text">
    </md-select-header>
    <md-optgroup>
        <md-option ng-value="filter-1" ng-model="showDiv">Attribute</md-option>
        <md-option ng-value="filter-2" ng-model="showOther">Another Attibute</md-option>
    </md-optgroup>
</md-select>

<div ng-show="showDiv || notice.status.visibility">
    This is some content.
</div>
<div ng-show="showOther || notice.status.visibility">
    This is more content.
</div>

欢迎任何不使用 javascript 的解决方案！

【问题讨论】：

标签： angularjs angularjs-material

【解决方案1】：

您的选项必须是单个模型，

这样做

<md-select ng-model="filters" multiple>
    <md-select-header>
        <input placeholder="" class="md-text">
    </md-select-header>
    <md-optgroup>
        <md-option name="filter" ng-value="filter-1" ng-model="showDiv">Attribute</md-option>
        <md-option name="filter" ng-value="filter-2" ng-model="showDiv">Another Attibute</md-option>
    </md-optgroup>
</md-select>
<div ng-show="showDiv == 'filter-1' || notice.status.visibility">
    This is some content.
</div>
<div ng-show="showDiv == 'filter-2' || notice.status.visibility">
    This is more content.
</div>

【讨论】：

那没有做到。如我的回答所示，我设法使用 ng-click 使其工作。

【解决方案2】：

虽然这不是一个非常优雅的解决方案，但我还是设法使用ng-click 完成了这项工作，如下所示：

<md-select ng-model="filters" multiple>
    <md-select-header>
        <input placeholder="" class="md-text">
    </md-select-header>
    <md-optgroup>
        <md-option ng-value="filter-1" ng-click="showDiv = ! showDiv">Attribute</md-option>
        <md-option ng-value="filter-2" ng-click="showOther = ! showOther">Another Attibute</md-option>
    </md-optgroup>
</md-select>

<div ng-show="showDiv || notice.status.visibility">
    This is some content.
</div>
<div ng-show="showOther || notice.status.visibility">
    This is more content.
</div>

【讨论】：