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

Question

在我的HTML页面中,我有两组基于布尔的单选按钮:标签:"是"和"否"/值:分别为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指令时,不再选中单选按钮(至少在渲染的浏览器视图中).奇怪的是我查看了源代码,它清楚地检查了正确的一个.更奇怪的是,我必须两次单击单选按钮才能"检查"它.我已经在最新版本的Chrome,FF和IE中对此进行了测试,这一切都导致了同样的问题.

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

---

解决方案: 为了解决这个问题,我从单选按钮中删除了ng-checked指令,并且只使用了@Cypher和@aet建议的ng-model.然后我用指令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';
    });
    ...
};

Answer 1

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