如何根據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。

Answer 1

你試過這種方法嗎？ 這是小提琴它很好用。

<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>

Answer 2

我認為您正在尋找ng-true-value和ng-false-value

<div ng-app>
    <div >
        <input type="checkbox" ng-true-value="A" ng-false-value="B" ng-model="check"/>        
    </div>

    <div ng-show="check == 'A'">
        Checked
    </div>
</div>

小提琴

Answer 3

<body ng-app>
     <label>Wolf: <input type="checkbox" ng-model="Wolf" ng-init="checked=true" /></label><br/>
     <label>Tiger: <input type="checkbox" ng-model="Tiger" ng-init="checked=false" /></label><br/>
     <label>Lion: <input type="checkbox" ng-model="Lion" ng-init="checked=false" /></label><br/> 
     Show when checked:
     <div ng-if="Wolf">
     <span> This is removed when the wolf is checked.
     </span>
     </div>

<div ng-if="Tiger">
    <span> This is removed when the tiger is checked.
    </span>
</div>
<div ng-if="Lion">
    <span> This is removed when the lion is  checked.
    </span>
</div>
</body>

Answer 4

輸入類型復選框在 ng-model 中返回 true false 所以我只使用它。 它的工作

   <div ng-app>
   <div >
      <input type="checkbox" ng-model="check"/>        
  </div>

  <div ng-show="check == true">
     Checked
  </div>

如何根據angular js中的復選框選擇顯示/隱藏div

問題描述

4 個解決方案

解決方案1
26 已采納 2014-02-13 08:23:26

解決方案2
11 2014-02-13 08:30:43

解決方案3
0 2017-04-13 07:14:30

解決方案4
0 2020-11-02 06:38:43

如何根據angular js中的復選框選擇顯示/隱藏div

問題描述

4 個解決方案

解決方案1 26 已采納 2014-02-13 08:23:26

解決方案2 11 2014-02-13 08:30:43

解決方案3 0 2017-04-13 07:14:30

解決方案4 0 2020-11-02 06:38:43

解決方案1
26 已采納 2014-02-13 08:23:26

解決方案2
11 2014-02-13 08:30:43

解決方案3
0 2017-04-13 07:14:30

解決方案4
0 2020-11-02 06:38:43