最初にAngularJsでラジオボタンをチェックする方法を設定しますか？

Question

私はラジオボタンをチェックすることによってタブがナビゲートされる2つのタブを作成しました。最初は2つのタブの1つがアクティブになりますが、対応するラジオボタンも最初にチェックする必要があります。

<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-INITそれ自己にこの値を設定することができます。 コントローラーに2行以下を追加できますか？

$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