如何通过在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 并在其中放入一个真/假值，因此具有该属性的 DOM 元素将根据该变量显示/隐藏。

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

当ShowSmall 为真而另外两个为假时，将显示<div>。尝试与 Fiddle 互动，看看是否符合您的需求！

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

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