반응형
각도 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가 표시되지 않습니다.
이런 식으로 해보셨나요?여기 바이올린이 있어요. 아주 좋아요.
<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>
당신이 찾고 있는 것 같아요.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>
<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>
입력 유형 확인란은 ng-model에서 true false를 반환하므로 그냥 사용합니다.효과가 있습니다.
<div ng-app>
<div >
<input type="checkbox" ng-model="check"/>
</div>
<div ng-show="check == true">
Checked
</div>
언급URL : https://stackoverflow.com/questions/21748594/how-to-show-hide-a-div-on-the-basis-of-a-checkbox-selection-in-angular-js
반응형
'itsource' 카테고리의 다른 글
| jQuery.extend와 jQuery.fn.extend의 차이점은? (0) | 2023.10.04 |
|---|---|
| WooCommerce 3에서 주문에 프로그래밍 방식으로 쿠폰 적용하기 (0) | 2023.10.04 |
| 목록에서 임의로 MYSQL 삽입 (0) | 2023.10.04 |
| jQuery divas 특정 인덱스로 삽입 (0) | 2023.09.24 |
| XML에서 요소와 노드의 차이점은 무엇입니까? (0) | 2023.09.24 |