Question

我试图检查帐户类型的单选按钮。它正确地存在于数据库中，但是我加载此页面时并没有显示出来。但是，当我单击单选按钮时，它会正确更新值并将其自身显示为已选中。

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

我在角1.4.9上使用了控制器的打字稿。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

ng-checked指令不应与ngModel一起使用，因为这可能导致意外行为。用于每个无线电

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

Angularjs：根据存储的数据设置一个单选按钮进行检查

2 个答案: