如何根據角度js中的複選框選擇顯示/隱藏div

我的頁面上有一個複選框和一個div。如何根據角度js中的複選框選擇顯示/隱藏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。

來源

2014-02-13 Sanjeev Singh

你試過這種方式嗎？這是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>

來源

2014-02-13 08:23:26

感謝泰勒。我知道我錯過了什麼。 –

我認爲你正在尋找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>

Fiddle

來源

2014-02-13 08:30:43 Dieterg

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

來源

2017-04-13 07:14:30

如何根據角度js中的複選框選擇顯示/隱藏div

回答

相關問題