Angularjs：根据存储的数据设置一个单选按钮以选中

Question

我正在尝试检查帐户类型的单选按钮。它在数据库中正确，但在我加载此页面时未显示。但是，当我单击单选按钮时，它会正确更新值并显示为已选中。

account.accountType 是一个枚举，有 3 个选项 internal = 0、customer = 1 或 proposal = 2。 它也可以在设置之前为空，然后不会检查任何内容。 我该怎么做？

我正在使用 angular 1.4.9 并使用 typescript 作为控制器。

<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-checked 指令不应与 ngModel 一起使用，因为这可能导致意外行为。 为每个收音机使用这个

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