Angularjs：保存されたデータに基づいてラジオボタンをチェックします

Question

私は、アカウントタイプのラジオボタンをチェックしようとしています。データベースに正しくありますが、このページを読み込むと表示されません。しかし、ラジオボタンをクリックすると、値が正しく更新され、チェックされているように表示されます。

account.accountTypeは、internal = 0、customer = 1、またはproposal = 2の3つの選択肢を持つ列挙型です。 設定する前にnullにすることもできます。 どうすればいいですか？

私は角度1.4.9にあり、コントローラーにはtypecriptを使用しています。これは予期しない動作につながる可能性として

<div class="form-group" 
 
ng-class="{ 'has-error': accountForm.$submitted && accountForm.accountType.$invalid }"> 
 
      <label for="customerName">Account type:</label> 
 
      <div> 
 
       <label class="radio-inline"> 
 
        <input type="radio" name="accountType" 
 
        id="internal" value="0" ng-model="account.accountType" 
 
        ng-required="true" ng-checked="account.accountType == 0"> Internal 
 
       </label> 
 
       <label class="radio-inline"> 
 
        <input type="radio" name="accountType" 
 
        id="customer" value="1" ng-model="account.accountType" 
 
        ng-required="true" ng-checked="account.accountType == 1"> Customer 
 
       </label> 
 
       <label class="radio-inline"> 
 
        <input type="radio" name="accountType" id="proposal" 
 
        value="2" ng-model="account.accountType" ng-required="true" 
 
        ng-checked="account.accountType == 2"> Proposal 
 
       </label> 
 
      </div> 
 
<p class="text-danger" ng-if="accountForm.$submitted && accountForm.accountType.$invalid">Please choose an account type</p> 
 
</div>

Answer 1

// change value of account.accountType in your controller then the corresponding //checkBox will be checked. //for example, i have set account.accountType as 2 with ng-init then //secondcheckbox will be checked on load

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="" ng-init="account.accountType = 2" class="form-group" ng-class="{ 'has-error': accountForm.$submitted && accountForm.accountType.$invalid }"> 
 
    <label for="customerName">Account type:</label>{{account.accountType}} 
 
    <div> 
 
    <label class="radio-inline"> 
 
        <input type="radio" name="accountType" 
 
        id="internal" value="1" ng-model="account.accountType" 
 
        ng-required="true" ng-checked="account.accountType == 1"> Internal 
 
       </label> 
 
    <label class="radio-inline"> 
 
        <input type="radio" name="accountType" 
 
        id="customer" value="2" ng-model="account.accountType" 
 
        ng-required="true" ng-checked="account.accountType == 2"> Customer 
 
       </label> 
 
    <label class="radio-inline"> 
 
        <input type="radio" name="accountType" id="proposal" 
 
        value="3" ng-model="account.accountType" ng-required="true" 
 
        ng-checked="account.accountType == 3"> Proposal 
 
       </label> 
 
    </div> 
 
    <p class="text-danger" ng-if="accountForm.$submitted && accountForm.accountType.$invalid">Please choose an account type</p> 
 
</div>

Answer 2

NG-確認ディレクティブは、ngModelと一緒に使用すべきではありません。 各ラジオにこれを使用してください。

<input type="radio" name="accountType" 
        id="internal" value="0" 
        ng-required="true" ng-checked="account.accountType == 0">