javascript - 如何通过在angularjs中使用多个复选框来显示和隐藏多个div？

Question

如何根据选中的复选框显示和隐藏div？我在 angular 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并在其中放置一个 truthy/falsy 值，因此具有该属性的 DOM 元素将根据该变量显示/隐藏。

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

当 ShowSmall是真的，另外两个是假的，即<div>将被显示。尝试与 Fiddle 交互，看看它是否满足您的需求!

您可能还想查看 NgIf它不是隐藏，而是从 DOM 树中删除 DOM 元素。

旁注:如果您只想显示一个，您可以考虑使用单选按钮而不是复选框。 JS Fiddle