Как показать и скрыть несколько div, используя несколько флажков в angularjs?

Question

Как показывать и скрывать div на основе отмеченного флажка?Я использую код ниже в угловой JS.У меня есть 3 флажка, если один флажок установлен, соответствующий div должен отображаться, а другой div должен быть скрыт.

  <label class="checkbox-inline" style="margin-top: 7px;">
    <input type="checkbox" id="chkSmall" name="small" class="bgCheck" value="small" data-ng-model="ShowSmall" data-ng-change="visibleSmall()" />
    Small Clock
  </label>
  <label class="checkbox-inline" style="margin-top: 7px;">
    <input type="checkbox" id="chkMedium" name="medium" class="bgCheck" value="medium" data-ng-model="ShowMedium" data-ng-change="visibleMedium()" data-ng-init="ShowMedium=true" />
    Medium Clock
  </label>
  <label class="checkbox-inline" style="margin-top: 7px;">
    <input type="checkbox" id="chkBig" name="big" class="bgCheck" value="big" data-ng-model="ShowBig" data-ng-change="visibleBig()" />
    Large Clock
  </label>
  <div data-ng-show="ShowSmall">
    Small Clock
  </div>
  <div data-ng-show="ShowMedium">
    Medium Clock
  </div>
  <div data-ng-show="ShowLarge">
    Large... or Big Clock?
  </div>

Answer 1

JS Fiddle

Мы можем использовать ng-show и поместить значение истинности / ложности внутрь, поэтому элемент DOM с этим атрибутом будет показан / скрыт в зависимости от этой переменной.

  <div data-ng-show="ShowSmall && !ShowMedium && !ShowLarge">
    Small Clock
  </div>

Когда ShowSmall имеет значение true, а два других - false, будет отображаться <div>.Попробуйте взаимодействовать с Fiddle, чтобы убедиться, что это соответствует вашим потребностям!

Вы также можете проверить NgIf , который вместо скрытия удаляет элемент DOM из дерева DOM.

Примечание: если вы хотите, чтобы отображался только один, вы можете рассмотреть возможность использования переключателей вместо флажков. JS Fiddle