AngularJS Material - Show/hide 个带有 md 选项的元素

Question

我正在尝试构建一个带有复选框的下拉菜单，当 cheked/unchecked 使用 AngularJS Material.

时 show/hide 某些元素

通常我会在复选框上使用 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 Material - Show/hide 个带有 md 选项的元素

AngularJS Material - Show/hide elements with md-option

angularjs

angularjs-material