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并在其中放入一个true / falsy值，这样根据该变量，将显示/隐藏具有该属性的DOM元素。

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

如果ShowSmall为true，而其他两个为false，则将显示<div>。尝试与小提琴互动，看看是否符合您的需求！

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

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

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

1 个答案: