Question

如何在页面加载时选中“是”单选按钮并相应地显示/隐藏字段集。目前正在加载单选按钮，但它没有显示字段集。

HTML

  <form name="myform" class="form "  novalidate >
 <fieldset>
       <span>Would you like a receipt sent to you?</span>
     <ul class="vList">
      <li>
        <input type="radio" name="receiptConfirmation" id="receiptAffirm"  ng-model="reciept" value="yes" ng-checked="true">
        <label class="form__radioLabel" for="receiptAffirm:" >Yes</label>
      </li>            
         <li>
      <input type="radio" name="receiptConfirmation" id="receiptDeny" ng-model="reciept" value="no">
            <label class="form__radioLabel" for="receiptDeny">No </label>
        </li>
   </ul>
 </fieldset>
 <fieldset class="fieldset" ng-show="reciept=='yes'">
    <legend class="isVisuallyHidden">Email Receipt</legend>
      <ul class="vList">
       <li>
         <label for="firstName" class="form__label">First Name</label>
         <input id="Text4" class="form__input form__input--textfield" type="text" >
      </li>
         <li>
           <label for="emailAddress" class="form__label">Email Address</label>                                           
           <input id="email1" class="form__input form__input--textfield" type="email">
        </li>
     </ul>
 </fieldset>


</form>

Answer 1

请勿将ng-checked与ng-model混合使用。设置ng-checked不会更新模型，它只会更新元素的checked属性。而是将ng-model reciept设置为所需的值。

从输入中删除ng-checked： -

 <input type="radio" name="receiptConfirmation" id="receiptAffirm"  
        ng-model="reciept" value="yes">

在您的控制器中设置模型： -

app.controller('MainCtrl', function($scope) {
 $scope.reciept = "yes";
});

<强> Demo

Answer 2

只需在控制器中设置$scope.reciept = 'yes';

你也拼错了收据。

基于单选按钮的角度隐藏/显示

2 个答案: