AngularJS 1.x не показывает радио как проверено - PullRequest
Новая
       22

AngularJS 1.x не показывает радио как проверено

0 голосов
/ 24 мая 2019

Я обновляю форму, чтобы иметь два набора переключателей, которые включают или выключают панели. Первый говорит «Да», чтобы связаться с клиентом или «Нет». Если нам нужно связаться, то представьте выбор, какой метод использовать, телефон или электронную почту. (Раньше был просто вопрос с контактом или нет.)

Хотя я могу заставить функцию показа работать должным образом, я не понимаю, почему я не могу заставить переключатель показываться как выбранный. (Может быть, я довольно зеленый для 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>

Похоже, когда выбран телефон:

enter image description here

и вот так, когда выбрана электронная почта:

enter image description here

Я добавил этот метод в главный контроллер: 

$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;
  }
});

Ответы [ 4 ]

2 голосов
/ 24 мая 2019

Радиокнопки обычно объединяются в группы, и атрибут name используется для их группировки.

В вашем коде есть две группы радиоканалов: Да / Нет и Телефон / Электронная почта.

Радиокнопки Да / Нет имеют одинаковое имя callTheCustomer, в то время как радиокнопки Телефон / Электронная почтаесть разные имена.Измените атрибуты name для кнопок радио и телефона на что-то более значимое для этой группы, например phoneOrEmail.

1 голос
/ 24 мая 2019

Избегайте использования $parent

Использование $parent проблематично. Если шаблон вложен более чем в одну директиву, которая создает экземпляр дочерней области, двустороннее связывание будет иметь проблему с скрытием данных. Лучше привязать ng-модели к свойству объекта в области видимости контроллера.

Если $parent связывает ng-model с $rootScope, контроллер $ scope не сможет установить значение модели.

Значение модели устанавливается, только дисплей не меняется.

Модель устанавливается, потому что обработчик ng-click устанавливает ее вручную. Если привязка верна, контроллер ng-model должен установить ее автоматически, и нет необходимости устанавливать ее вручную. ngModelController требуется правильная привязка для рендеринга в HTML.

Избегайте использования $parent. Определите объекты в $ scope для вашего контроллера, затем обратитесь к свойству этого объекта. См. Нюансы наследования области действия в 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>
0 голосов
/ 29 мая 2019

Несколько вещей были в игре здесь

  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;
      }
    });

Я думаю, что теперь она читается лучше.

0 голосов
/ 24 мая 2019

входы type = "radio" получают строки в качестве значения, проверьте здесь:

Значение, на которое должно быть установлено выражение ngModel при выборе. Обратите внимание, что значение поддерживает только строковые значения ... документация

Радио-кнопка появляется как выбранное, когда выражение ngModel равно значению.

...