AngularJS 1.x 未显示选中的收音机

Question

我正在更新一个表单，使其具有两组打开或关闭面板的单选按钮。 第一个说“是”以联系客户或“否”。如果我们要联系，请选择使用哪种方法，电话或电子邮件。 （以前只有联系与不联系的问题。）

虽然我可以让显示功能正常工作，但我不明白为什么我无法让单选按钮显示为选中状态。 （可能是我对 AngularJS 相当陌生。）

  <div class="radio styled-radio" id="callTheCustomerDiv">
    <input class="form-control" id="callTheCustomerRadio1"
           name="callTheCustomer" type="radio" value="Yes"
           ng-required="issueType=='IncidentDiv'"
           ng-model="$parent.callTheCustomer"
           ng-click="contactSelection('none')"/>
    <label for="callTheCustomerRadio1"> Yes</label> - Please indicate how the customer wants to be contacted.<br/>
    <div class="form-group" id="howToContactDiv" ng-show=state class="row fullWidth">
      <div id="contactOptions" class="form-group">
        <label for="phoneRadio">Phone</label>
        <!-- radio indicator is not working correctly -->
        <input id="phoneRadio" class="form-control" type="radio"
               ng-click="contactSelection('phone')"
               name="phoneSelect" ng-model="$parent.phoneSelect"
               value="{{$parent.phoneSelect}}" />
         &nbsp; &nbsp; &nbsp; &nbsp;
        <label for="emailRadio">Email</label>
        <input id="emailRadio" class="form-control" type="radio"
               ng-click="contactSelection('email')" name="emailSelect"
               ng-model="$parent.emailSelect"
               value="{{$parent.emailSelect}}" />
        <br/>    <!--     phoneSelect : {{phoneSelect}} -->
      </div>
      <div id="phoneContact" ng-show="contactType=='phone'">
        <span>Phone
          <input class="form-control input-sm" type="text"
                 name="callTheCustomerPhone"
                 id="callTheCustomerPhone"
                 ng-model="$parent.callTheCustomerPhone"
                 ng-required="$parent.contactType=='phone' && accForm.phoneNumber.$viewValue === ''"
                 maxlength="20"/>
        </span>
      </div>

      <br/>
      <div id="emailContact" ng-show="contactType=='email'">
        <span>Email
        <input class="form-control input-sm" type="text"
               name="emailTheCustomer" id="emailTheCustomer"
               ng-model="$parent.emailTheCustomer"
               ng-required="$parent.contactType=='email' && accForm.emailTheCustomer.$viewValue === ''"
               maxlength="150"/></span>
      </div>
    </div>
    <input class="form-control" id="callTheCustomerRadio2"
           name="callTheCustomer" type="radio" value="No"
           ng-required="issueType=='IncidentDiv'"
           ng-model="$parent.callTheCustomer"
           ng-click="contactSelection('no')"/>
    <label for="callTheCustomerRadio2">No</label>

  </div>

选择电话时的样子：

和选择电子邮件时，如图所示： h2>

我将此方法添加到主控制器：

$scope.contactSelection = (function (contact) {
  if (contact=='none'
    ||contact=='email'
    ||contact=='phone'){
    $scope.state = true;
    $scope.contactType = contact;
    if (contact=='phone'){$scope.phoneSelect = true;$scope.emailSelect = false;}
    if (contact=='email'){$scope.emailSelect = true;$scope.phoneSelect = false;}

  }else{
    $scope.state = false;
    $scope.contactType = 'no';
    $scope.emailTheCustomer = '';
    $scope.callTheCustomerPhone = '';
    $scope.phoneSelect = false;
    $scope.emailSelect = false;
  }
});

Answer 1

这里发生了一些事情

1. 我不得不更改标签输入标签顺序。

    <div class="radio styled-radio" id="callTheCustomerDiv">
       <input class="form-control" id="callTheCustomerRadio1" name="callTheCustomer" type="radio" value="Yes"
              ng-required="issueType=='IncidentDiv'"
              ng-model="callTheCustomer"
              ng-click="contactSelection(null)" />
       <label for="callTheCustomerRadio1"> Yes</label> - Please indicate how the customer wants to be contacted.<br/>
       <div class="form-group" id="howToContactDiv"
       ng-if="customerContact.contactOptionShow" class="row fullWidth">
         <div id="contactOptionsDiv" >
           <div id="contactOptionsSelectDiv" >
               <input  class="form-control" id="phoneRadio" type="radio" name="contactSelection"
               ng-model="customerContact.contactSelection" value="phone" />
               <label for="phoneRadio">Phone</label>
             &nbsp; &nbsp; &nbsp; &nbsp;
             <input  class="form-control" id="emailRadio" type="radio" name="contactSelection"
             ng-model="customerContact.contactSelection" value="email" />
             <label for="emailRadio">Email</label>
             <br/>
           </div>
           <div id="phoneContactDiv" ng-show="customerContact.contactSelection=='phone'">
             <span>Phone
             <input class="form-control input-sm" type="text" name="callTheCustomerPhone" id="callTheCustomerPhone"
                   ng-model="callTheCustomerPhone"
                   ng-required="customerContact.contactSelection=='phone' && accForm.phoneNumber.$viewValue === ''"
                   maxlength="20"/></span>
           </div>
           <br/>
           <div id="emailContactDiv" ng-show="customerContact.contactSelection=='email'">
             <span>Email
             <input class="form-control input-sm" type="text" name="emailTheCustomer" id="emailTheCustomer"
                   ng-model="emailTheCustomer"
                   ng-required="customerContact.contactSelection=='email' && accForm.emailTheCustomer.$viewValue === ''" maxlength="150"/></span>
           </div>
         </div>
       </div>
       <input class="form-control" id="callTheCustomerRadio2" name="callTheCustomer" type="radio" value="No"
              ng-required="issueType=='IncidentDiv'" ng-model="callTheCustomer"
              ng-click="contactSelection('clear')" />
       <label for="callTheCustomerRadio2">No</label>
     </div>
   

2. 我完全删除了 $parent 引用并通过使用 变量的属性。

修改了 mainController 方法和变量，如下所示：

  $scope.customerContact ={
    contactOptionShow : false,
    contactSelection : null
  };
    $scope.contactSelection = (function (contact) {
      if (contact != null
          && contact=='clear'      ){
          $scope.customerContact.contactOptionShow = false;
          $scope.customerContact.contactSelection = '';
          $scope.emailTheCustomer = '';
          $scope.callTheCustomerPhone = '';
      }else{
        $scope.customerContact.contactOptionShow = true;
      }
    });

我认为它现在读起来也更好。

Answer 2

避免使用$parent

使用$parent 是有问题的。如果模板嵌套了多个实例化子范围的指令，则双向绑定将存在数据隐藏问题。最好将 ng-models 绑定到控制器范围内对象的属性。

如果$parent将ng-model绑定到$rootScope，控制器$scope将无法设置模型值。

模型值正在设置，只是显示没有改变。

模型正在设置，因为 ng-click 处理程序正在手动设置它。如果绑定正确，ng-model 控制器应该自动设置，不需要手动设置。 ngModelController 需要适当的绑定才能呈现到 HTML。

避免使用$parent。在 $scope 中为您的控制器定义对象，然后引用该对象的属性。见Nuances of scope inheritance in AngularJS。

即使ng-if 指令添加了子作用域，以下示例也正确绑定：

angular.module("app",[])
.controller("ctrl",function($scope) {
    $scope.fd1={
         sel1: null,
         yes1: false
    };
})

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="ctrl">
    <form name="form1">
         <input ng-model="fd1.yes1" type="checkbox" />
         OK to Contact?<br>
         <div ng-if="fd1.yes1">
           <input ng-model="fd1.sel1" type="radio" name="sel1" value="email" />
           email
           <input ng-model="fd1.sel1" type="radio" name="sel1" value="phone" />
           phone
           <br>{{fd1.sel1}}
           <div ng-show="fd1.sel1">
             <input ng-model="fd1.info1">
             <br>
             <button ng-click="fd1.sel1=null">Reset choice</button>
           </div>
         </div>  
     </form>
</body>

Answer 3

单选按钮通常成组出现，name 属性用于对它们进行分组。

您的代码中有两个单选组，是/否和电话/电子邮件。

是/否单选按钮具有相同的名称callTheCustomer，而电话/电子邮件单选按钮具有不同的名称。将电话和电子邮件单选按钮的 name 属性更改为对该组更有意义的内容，例如 phoneOrEmail。