javascriptangularjsradio-buttonangularjs-ng-initangularjs-ng-checked

Radiobuttons ng-checked not displaying div by default and works only onclick


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>

Solution

  • 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-classwill decide to show element or not on basis of condition.

    Working Fiddle.

    Hope this may help you. Thanks.