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>

当选择“电话”时，外观如下：

，并且在选择电子邮件时是这样的：

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

$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

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

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

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

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

类型为“ radio”的输入获取字符串作为值，请在此处检查：

选择时应将ngModel表达式设置为的值。请注意，值仅支持字符串值... documentation

当ngModel表达式等于value时，单选按钮出现。

Answer 4

情侣们在这里玩

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

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

我完全删除了$ 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;
      }
    });

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

AngularJS 1.x不显示选中的广播

当选择“电话”时，外观如下：

，并且在选择电子邮件时是这样的：

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

4 个答案:

避免使用`$parent`

AngularJS 1.x不显示选中的广播

当选择“电话”时，外观如下：

，并且在选择电子邮件时是这样的：

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

4 个答案:

避免使用$parent

避免使用`$parent`