How to set radio button checked initially in AngularJs?

Question

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

Ruhul · Accepted Answer · 2016-08-23 10:39:47Z

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'
  }];

This can be done with my code just by making a slight modification in my ng-model attribute. Instead of choice.isSelected, make it tab.isSelected. But then again, is it necessary to give true value in quotes?

NathanJrT · Accepted Answer · 2016-08-23 10:34:56Z

0

You can do this simply by setting the checked attribute for the input. For example:

<input type="radio" checked> This is a radio button

answered Aug 23, 2016 at 10:34

NathanJrT

116 bronze badges

1 Comment

Pbk1303 Over a year ago

this won't work here, he is creating the input radio buttons in loop using angular js, if he just mentions as checked, both the radio buttons will have the checked=true value.

Collectives™ on Stack Overflow

How to set radio button checked initially in AngularJs?

2 Answers 2

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Related