I'm new to web development with Angular js. I'm trying to show and hide a textbox inside a div using class. I have two radio buttons "Yes" and "No". So, I'm trying to show the div containing the textbox when I click on Yes and hide when I click on No.
Now, I'm trying to do this using ng-class and ng-model only and not using ng-show/ng-hide.
When I keep a radiobutton clicked by default (say Yes) using ng-checked="true", why is the div not displayed and only gets displayed onclick of the button again. Doesn't the ng-checked work for ng-class.
Fiddle
<label class="ui-radio checkbox-inline"> <input type="radio" name="toggle1" data-check="1" value="Yes" ng-model="request_same" /> <span> Yes </span> </label>
<label class="ui-radio checkbox-inline"> <input type="radio" ng-Checked="true" name="toggle1" data-check="2" value="No" ng-model="request_same" /> <span> No </span> </label>
Don't use ng-check
it will only select a radio box but, it will not update the ng-model value. Instead of doing ng-checked use ng-init
and set the value of model.
Working HTML
<div ng-app>
<div class="radioToggle1">
<div class="col-xs-12 form-group" id="request_same" ng-init="request_same='Yes'" >
<p>Yes or no</p>
<label class="ui-radio checkbox-inline">
<input type="radio" name="toggle1" data-check="1" value="Yes" ng-model="request_same" /> <span> Yes </span>
</label>
<label class="ui-radio checkbox-inline">
<input type="radio" name="toggle1" data-check="2" value="No" ng-model="request_same" /> <span> No </span>
</label>
</div>
<div data-show="1" ng-class="{ active : request_same == 'Yes' }" class="hide-div">
<div class="col-xs-12 col-md-12 borderTop">
<h5> <strong> Vendor Details </strong> </h5>
<input type="text" />
</div>
</div>
</div>
<div data-show="2"></div>
</div>
Just added hide-div
class to by default hide the div. And after that ng-class
will decide to show element or not on basis of condition.
Hope this may help you. Thanks.