Question

我尝试构建一个下拉菜单，其中的复选框在使用AngularJS Material进行cheked / unchecked时显示/隐藏某些元素。

通常我会在复选框上使用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进行讨论的解决方案都是最受欢迎的！

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

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

AngularJS材质 - 使用md-option显示/隐藏元素

2 个答案: