如何在AngularJs中设置初始选中的单选按钮

How to set radio button checked initially in AngularJs?

本文关键字：单选按钮 设置 AngularJs      更新时间：2023-09-26

我已经创建了两个选项卡，其中选项卡通过检查单选按钮进行导航。两个选项卡中的一个最初将是活动的，但我需要有相应的单选按钮最初也选中。

<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

你已经用$scope.choice绑定了你的单选按钮。isSelected，您可以在controller或ng-init it self中设置这个值。你能在你的控制器中添加下面两行吗?

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

或者更好的方式，你可以修改你的标签，如:

<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>

在你的控制器中

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

只需为输入设置checked属性即可。例如:

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

相关文章：