AngularJS Material - Показать / скрыть элементы с опцией md - PullRequest
Новая
       9

AngularJS Material - Показать / скрыть элементы с опцией md

0 голосов
/ 24 апреля 2018

Я пытаюсь создать выпадающее меню с флажками, которые показывают / скрывают определенные элементы при проверке / снятии флажка с использованием AngularJS Material.

Обычно я бы использовал md-checkbox и комбинацию ng-model нафлажок и ng-show на элементе, который нужно показать или скрыть, но я пытаюсь сделать это с помощью Выбрать заголовок , как видно на веб-сайте 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, приветствуются!

Ответы [ 2 ]

0 голосов
/ 25 апреля 2018

Хотя это не очень элегантное решение, мне удалось выполнить эту работу, используя 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>
0 голосов
/ 25 апреля 2018

Ваш вариант должен быть одной моделью,

Сделайте это так 

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