使用 ng-model 进行 ng-checked 的单选按钮 [英] Radio Buttons ng-checked with ng-model

问题描述

在我的 HTML 页面中，我有两组基于布尔值的单选按钮:标签:是"和否"/值:分别为 True 和 False.我正在从 PostgreSQL 数据库表中填充完整的表单，以允许经过身份验证的用户查看包含填充数据的表单并编辑包含单选按钮的填充字段，然后保存将数据保存到数据库的表单.所有其他文本字段都没有问题地填充；它都是单选按钮的集合我在预先检查单选按钮时遇到问题.

In my HTML page, I have two sets of Boolean based radio buttons: Labeled: "Yes" and "No" / Values: True and False respectively. I'm populating a full form from a PostgreSQL database table to allow the authenticated user to view the form with populated data and edit the populated fields including the radio buttons, then save the form which will save the data to the DB. All of the other text fields populate without issue; it's both collection of radio buttons I am having an issue with pre-checkmarking the radio buttons.

下面没有在前端预先填充checked(而是在HTML源代码中添加了checked的正确属性):

The below does not pre-populate the checked on front end (but adds the correct attribute of checked in HTML source):

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

但是，这确实会在加载时检查正确的单选按钮:

However, this does check the correct radio button on load:

    <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 在从具有布尔数据类型的列中查询数据时设计的一部分.

Note: I needed to check against the string boolean value in the directive ng-checked since the boolean value always comes back as a string from PostgreSQL. This, apparently, was a part of PostgreSQL's design when querying data from columns that have boolean data types.

添加 ng-model 指令时，不再选中单选按钮(至少在呈现的浏览器视图中).奇怪的是，我查看了源代码，它清楚地检查了正确的源代码.更奇怪的是，我必须单击单选按钮 两次 才能检查"它.我已经在最新版本的 Chrome、FF 和 IE 中对此进行了测试，结果都是相同的问题.

When adding the ng-model directive, the radio button no longer is checked (at least in the rendered browser view). The odd part is that I looked at the source and it clearly checks the correct one. What's even more odd, is that I have to click on the radio button twice to 'check' it. I've tested this in latest version of Chrome, FF, and IE and it all results in the same issue.

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

The question is: when adding the ng-model directive, why would the HTML source add 'checked' in the radio button attribute, but seemingly does not mark the radio button? Furthermore, why would I have to click twice on the radio button that IS supposed to be checked?

解决方案:为了解决这个问题，我从单选按钮中删除了 ng-checked 指令，并且只使用了 @Cypher 和 @aet 建议的 ng-model.然后我将属性 value 替换为指令 ng-value "true" &错误的".之后，我在控制器中设置值.

Solution: To fix this, I removed the ng-checked directive from the radio buttons and only used ng-model as suggested by @Cypher and @aet. I then replaced the attribute value with the directive ng-value "true" & "false". After, I set the values in the controller.

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

推荐答案

我认为你应该只使用 ng-model 并且应该适合你，这里是 angular 官方文档的链接 https://docs.angularjs.org/api/ng/input/input%5Bradio%5D

I think you should only use ng-model and should work well for you, here is the link to the official documentation of angular https://docs.angularjs.org/api/ng/input/input%5Bradio%5D

示例中的代码应该不难适应您的具体情况:

The code from the example should not be difficult to adapt to your specific situation:

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

这篇关于使用 ng-model 进行 ng-checked 的单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！