AngularJS材料-使用md显示/隐藏元素-选项

Question

我正在尝试构建一个下拉菜单，其中的复选框会在使用AngularJS材料显示/隐藏某些元素时显示/隐藏某些元素。

通常，我会在复选框中使用md-checkbox和ng-model的组合，在要显示或隐藏的元素上使用ng-show，但是我尝试使用选择标头，就像在AngularJS材料网站上看到的那样，它不起作用。

下面是代码：

<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的解决方案都非常受欢迎！

Answer 1

虽然这不是一个非常优雅的解决方案，但我成功地使用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>

Answer 2

你的选择必须是单一模式，

这样做

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