javascript - 如何根据 Angular js中的复选框选择显示/隐藏div

Question

我的页面上有一个复选框和一个 div。

<input type="checkbox" id="Animals" name="Animals" ng-model="ModelData.Animals" 
                            ng-checked="ModelData.Animals == 'A'" />


 <div class="form-group" ng-show="ModelData.Animals == 'A'">

                        <label for="FirstName" class="col-md-9">
                            Are you interested in Animal Liability Coverage?
                        </label>
                        <div class="col-md-3">
                            <label>
                                <input type="radio" id="AnimalLiabCovY" name="AnimalLiabilityCoverageRadio" ng-model="ModelData.AnimalLiabCov"
                                    value="Y" />
                                Yes
                                <input type="radio" id="AnimalLiabCovN" name="AnimalLiabilityCoverageRadio" ng-model="ModelData.AnimalLiabCov"
                                    value="N" />
                                No
                            </label>
                        </div>
  </div>

我想在选中该复选框时显示 DIV，并在取消选中时隐藏该 DIV。第一次，上面的代码工作得很好，即当选中复选框并且 DIV 在取消选择复选框时隐藏。但第一次之后就不行了。选中该复选框后不显示 DIV。

Answer 1

你试过这样吗？这是fiddle效果很好。

<input type="checkbox" id="Animals" name="Animals" ng-model="ModelData.Animals" />
<div class="form-group" ng-show="ModelData.Animals">
  <label for="FirstName" class="col-md-9">
    Are you interested in Animal Liability Coverage?
  </label>
  <div class="col-md-3">
    <label>
      <input type="radio" id="AnimalLiabCovY" name="AnimalLiabilityCoverageRadio" ng-model="ModelData.AnimalLiabCov" value="Y" /> Yes
      <input type="radio" id="AnimalLiabCovN" name="AnimalLiabilityCoverageRadio" ng-model="ModelData.AnimalLiabCov" value="N" /> No
    </label>
  </div>
</div>