如何設置最初在AngularJs中檢查的單選按鈕？

Question

我已經創建了兩個選項卡，其中的選項卡通過檢查單選按鈕進行導航。兩個標籤中的一個標籤最初是有效的，但我最初需要檢查相應的單選按鈕。

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

你已經綁定了$ scope.choice.isSelected你的單選按鈕，就可以在控制器或NG-初始化它的自我設置這個值。 你可以在你的控制器中添加下面兩行嗎？

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

Answer 2

你可以簡單地通過設置輸入的checked屬性來做到這一點。例如：

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