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

Question

Plunker

如何在页面加载时检查“是”单选按钮并相应地显示/隐藏字段集。当前加载单选按钮已选中，但未显示字段集。

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';？

你也拼错了receipt。