Question

在我的HTML页面中，我有两组基于布尔的单选按钮：标签：＆＃34;是＆＃34;和＆＃34;不＆＃34; /值： 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中的字符串boolean值，因为boolean值总是以PostgreSQL中的字符串形式返回。显然，当从具有布尔数据类型的列查询数据时，这是PostgreSQL设计的一部分。

添加ng-model指令时，不再选中单选按钮（至少在渲染的浏览器视图中）。奇怪的是我查看了源代码，它清楚地检查了正确的一个。更奇怪的是，我必须点击单选按钮两次才能检查＆＃39;它。我已经在最新版本的Chrome，FF和IE中对此进行了测试，这一切都导致了同样的问题。

问题是：在添加ng-model指令时，为什么HTML源会添加＆＃39;检查＆＃39;在单选按钮属性中，但似乎没有标记单选按钮？此外，为什么我必须在应该检查的单选按钮上单击两次？

解决方案： 为了解决这个问题，我从单选按钮中删除了ng-checked指令，并且只使用了@Cypher和@aet建议的ng-model。然后我用指令ng-value＆＃34; true＆＃34;替换属性 value 。＆安培; ＆＃34;假＆＃34 ;.之后，我在控制器中设置了值。

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

Answer 1

我认为你应该只使用ng-model并且应该适合你，这里是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>

Answer 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" />

Answer 3

[个人选择] 避免使用$ scope，基于John Papa Angular Style Guide

所以我的想法是利用当前的模型：

＆＃13;

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

＆＃13;

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

＆＃13;

我希望我能提供帮助;）

Answer 4

请解释为何使用相同的ng-model？通过ng- model传递什么价值以及如何传递？更具体地说，如果我使用console.log(color)那将是什么输出？

使用ng-model检查的单选按钮

4 个答案: