Hiding elements with ng-hide and radios?
Question
I have a radio:
<div class="row">
<div class="col15">
<input type="radio" id="client_yes" name="client" ng-model="entry.client" ng-required="true" value="yes"><label for="client_yes">Yes</label>
</div>
<div class="col15">
<input type="radio" id="client_no" name="client" ng-model="entry.client" ng-required="true" value="no"><label for="client_no">No</label>
</div>
</div>
When client_yes is selected I want some questions on the form to be hidden using ng-hide.
I've check out the example in the docs:
http://docs.angularjs.org/api/ng.directive:ngHide
This uses a tick box to hide:
ng-hide="checked"
Checked is the name of the ng-model of the tick box, I'm just not sure how to work it with radios as they both have the same model name?
2 answers
solution1
1 ACCPTED 2013-11-21 15:50:49
Use the ng-hide directive on the questions div like this:
ng-hide="entry.client=='yes'"
See the plunker: http://plnkr.co/edit/o2dXzq3lTGy4iBPxS6MT?p=preview
This is the HTML code:
<body ng-app="app" ng-controller="Controller">
<div class="row">
<div class="col15">
<input type="radio" id="client_yes" name="client" ng-model="entry.client" ng-required="true" value="yes" />
<label for="client_yes">Yes</label>
</div>
<div class="col15">
<input type="radio" id="client_no" name="client" ng-model="entry.client" ng-required="true" value="no" />
<label for="client_no">No</label>
</div>
<div class="col15" ng-hide="entry.client=='yes'">
question to hide
</div>
<div class="col15">
question NOT to hide
</div>
<div class="col15" ng-hide="entry.client=='yes'">
question to hide
</div>
</div>
</body>
solution2
0 2013-11-21 15:47:47
According to the docs , you can use the value attribute to set each radio button to a different value on selection:
<div class="row">
<div class="col15">
<input type="radio" id="client_yes" name="client" value="yes" ng-model="entry.client" ng-required="true"><label for="client_yes">Yes</label>
</div>
<div class="col15">
<input type="radio" id="client_no" name="client" value="no" ng-model="entry.client" ng-required="true"><label for="client_no">No</label>
</div>
Then you could hide based on the value:
ng-hide="entry.client == 'yes'"
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.