Кнопки радио ng-check с ng-model

В моей HTML-странице у меня есть два набора булевых переключателей: Labeled: "Да" и "Нет" /Значения: True и False соответственно. Я заполняю полную форму из таблицы базы данных PostgreSQL, чтобы позволить аутентифицированному пользователю просматривать форму с заполненными данными и редактировать заполненные поля, включая переключатели, а затем сохранять форму, которая будет сохранять данные в БД. Все остальные текстовые поля заполняются без проблем; это как набор переключателей, с которыми у меня возникает проблема с предварительным проверкой переключателей.

В приведенном ниже примере не предварительно заполняется флажок с проверкой на переднем конце (но добавляется правильный атрибут, отмеченный в источнике HTML):

    <input id="billing-no" type="radio" name="billing" ng-model="person.billing" value="FALSE" ng-checked="person.billing == 'false'" />
    <input id="billing-yes" type="radio" name="billing" ng-model="person.billing" value="TRUE" ng-checked="person.billing == 'true'" />

Однако, это проверяет правильный переключатель при загрузке:

    <input id="billing-no" type="radio" name="billing" value="FALSE" ng-checked="person.billing == 'false'" />
    <input id="billing-yes" type="radio" name="billing" value="TRUE" ng-checked="person.billing == 'true'" />

Примечание. Мне нужно было проверить значение булевской строки в директиве ng-checked, поскольку логическое значение всегда возвращается в виде строки из PostgreSQL. Это, по-видимому, было частью дизайна PostgreSQL при запросе данных из столбцов с булевыми типами данных.

При добавлении директивы ng-model радиокнопка больше не проверяется (по крайней мере, в режиме просмотра браузера). Нечетная часть заключается в том, что я посмотрел на источник, и он четко проверяет правильность. Что еще более странно, так это то, что я дважды нажимаю на переключатель, чтобы "проверить" его. Я тестировал это в последней версии Chrome, FF и IE, и все это приводит к той же проблеме.

Вопрос: при добавлении директивы ng-model, почему источник HTML добавляет "проверено" в атрибут радиокнопки, но, похоже, не помечает переключатель? Кроме того, почему мне нужно дважды щелкнуть переключатель, который должен быть проверен?

Решение: Чтобы исправить это, я удалил директиву ng-checked из переключателей и использовал только ng-модель, как это было предложено @Cypher и @aet. Затем я заменил значение атрибута директивой ng-value "true" и "false". После этого я устанавливаю значения в контроллере.

HTML

<input id="billing-no" type="radio" name="billing" ng-model="person.billing" ng-value="false" />
<input id="billing-yes" type="radio" name="billing" ng-model="person.billing" ng-value="true" />

Angular JS

app.controller('peopleCtrl', function($scope, peopleFactory){
    ...
    peopleFactory.getPerson(personParams).then(function(data){
        $scope.person = data;
        /* moved from ng-checked */
        $scope.person.billing = data.billing == 'true';
    });
    ...
};

Ответы

Ответ 1

Я думаю, вы должны использовать только ng-модель и должны хорошо работать для вас, вот ссылка на официальную документацию angular https://docs.angularjs.org/api/ng/input/input%5Bradio%5D

Код из примера не должен быть трудно адаптировать к конкретной ситуации:

<script>
   function Ctrl($scope) {
      $scope.color = 'blue';
      $scope.specialValue = {
         "id": "12345",
         "value": "green"
      };
   }
</script>
<form name="myForm" ng-controller="Ctrl">
   <input type="radio" ng-model="color" value="red">  Red <br/>
   <input type="radio" ng-model="color" ng-value="specialValue"> Green <br/>
   <input type="radio" ng-model="color" value="blue"> Blue <br/>
   <tt>color = {{color | json}}</tt><br/>
</form>

Ответ 2

Я решил свою проблему просто используя ng-init для выбора по умолчанию вместо ng-checked

<div ng-init="person.billing=FALSE"></div>
<input id="billing-no" type="radio" name="billing" ng-model="person.billing" ng-value="FALSE" />
<input id="billing-yes" type="radio" name="billing" ng-model="person.billing" ng-value="TRUE" />

Ответ 3

Пожалуйста, объясните, почему используется одна и та же ng-модель? И какое значение передается через ng- model и как оно передается.. чтобы быть более конкретным, если я использую console.log(color), какой будет выход?

Ответ 4

[Личный вариант] Избегание использования $scope на основе John Papa Angular Руководство по стилю

поэтому моя идея использует текущую модель:

(function(){
  'use strict';
  
   var app = angular.module('way', [])
   app.controller('Decision', Decision);

   Decision.$inject = [];     

   function Decision(){
     var vm = this;
     vm.checkItOut = _register;

     function _register(newOption){
       console.log('should I stay or should I go');
       console.log(newOption);  
     }
   }

     
     
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div ng-app="way">
  <div ng-controller="Decision as vm">
    <form name="myCheckboxTest" ng-submit="vm.checkItOut(decision)">
 <label class="radio-inline">
  <input type="radio" name="option" ng-model="decision.myWay"
                           ng-value="false" ng-checked="!decision.myWay"> Should I stay?
                </label>
                <label class="radio-inline">
                    <input type="radio" name="option" ng-value="true"
                           ng-model="decision.myWay" > Should I go?
                </label>
  
</form>
  </div>
  
</div>