Shekhar R Shekhar R - 3 months ago 27
HTML Question

How to set radio button checked initially in AngularJs?

I have created two tabs where the tabs gets navigated by checking radio buttons. One of the two tabs will be active initially but I need to have the corresponding radio button too checked initially.

<div ng-app="myApp">
<div class="account-tab-selector" id="tabs" ng-controller="TabsCtrl">
<ul>
<li class="col-sm-6 text-center" ng-repeat="tab in tabs">
<label for="{{tab.url}}">
<input ng-class="{active:isActiveTab(tab.url)}" ng-click="onClickTab(tab)" type="radio" name="radio" id="{{tab.url}}" ng-model="choice.isSelected" value="true">{{tab.title}}</label>
</li>
</ul>
<div class="clearfix"></div>
<div id="mainView">
<div ng-include="currentTab"></div>
</div>
</div>
<script type="text/ng-template" id="one.tpl.html">
<div class="customer-reg-form" id="new_customer_form">
<div class="sign-up-fb">
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i>
Sign Up With Facebook</a>
</div>
<div class="reg-form">
<div class="or-separator"><span>OR</span></div>
<div class="row">
<div class="col-sm-6 form-group">
<label for="fname">First Name<span>*</span></label>
<div class="input-group">
<input name="firstname" id="fname">
</div>
</div>
<div class="col-sm-6 form-group">
<label for="lname">Last Name<span>*</span></label>
<div class="input-group">
<input name="lastname" id="lname">
</div>
</div>
<div class="col-sm-6 form-group">
<label for="mnumber">Mobile Number<span>*</span></label>
<div class="input-group">
<input name="mobile-number" id="mnumber">
</div>
</div>
<div class="col-sm-6 form-group">
<label for="dlocation">Default Location<span>*</span></label>
<div class="input-group">
<select name="default-location" class="dropstyle">
<option></option>
<option>Kansas</option>
</select>
</div>
</div>
<div class="col-sm-12 form-group">
<label for="email">Email Address<span>*</span></label>
<div class="input-group">
<input name="email" id="email">
</div>
</div>
<div class="col-sm-12 form-group">
<label for="password">Password<span>*</span></label>
<div class="input-group">
<input name="password" id="password">
</div>
</div>
</div>
<div class="agreement">By clicking "Register" below, you are agreeing to our <a href="#">Terms of Service</a> agreement.</div>
</div>
</div>
</script>
<script type="text/ng-template" id="two.tpl.html">
<div class="customer-reg-form" id="existing_customer_form">
<div class="sign-up-fb">
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i>
Login With Facebook</a>
</div>
<div class="reg-form">
<div class="or-separator"><span>OR</span></div>
<div class="row">
<div class="col-sm-12">
<label for="mnumber">Email Address<span>*</span></label>
<input id="mnumber">
</div>
<div class="col-sm-12">
<label for="mnumber">Password<span>*</span></label>
<input id="mnumber">
</div>
</div>
<div class="forgot-pwd"><a href="#">Forgot Password?</a></div>
</div>
</div>
</script>
</div>


var app = angular.module("myApp", []);
app.controller('TabsCtrl', ['$scope', function($scope) {
$scope.tabs = [{
title: 'I am a new customer',
url: 'one.tpl.html',
isSelected: true
}, {
title: 'I have an account',
url: 'two.tpl.html'
}];
$scope.currentTab = 'one.tpl.html';

$scope.onClickTab = function(tab) {
$scope.currentTab = tab.url;
};

$scope.isActiveTab = function(tabUrl) {
return tabUrl == $scope.currentTab;
};
}]);


Jsfiddle here

Answer

You have bound your radio button with $scope.choice.isSelected, you can set the value for this in controller or in ng-init it self. Can you please add below two lines in your controller?

$scope.choice={};
$scope.choice.isSelected = "true";

Or in much better way, you can modify your tag like:

<li class="col-sm-6 text-center" ng-repeat="tab in tabs">
        <label for="{{tab.url}}">
          <input ng-class="{active:isActiveTab(tab.url)}" ng-click="onClickTab(tab)" type="radio" name="radio" id="{{tab.url}}" ng-model="tab.isRadioChecked" value="true">{{tab.title}}</label>
      </li>

And in your controller.

$scope.tabs = [{
    title: 'I am a new customer',
    url: 'one.tpl.html',
    isSelected: true,
isRadioChecked: "true"
  }, {
    title: 'I have an account',
    url: 'two.tpl.html'
  }];