单选按钮NG-检查与NG-模型 [英] Radio Buttons ng-checked with ng-model

问题描述

在我的HTML页面，我有两套基于布尔单选按钮：标记：是和否/值：真的和的假的分别。我是从一个PostgreSQL数据库表中填充一个完整的表单，允许经过身份验证的用户查看与填充数据的格式和编辑填充字段，包括单选按钮，然后保存将数据保存到数据库的形式。所有其它文本框的填充没有问题;这是我有pre-勾选单选按钮问题单选按钮的两个集合。

下面没有pre-填充检查了前端（但增加了正确的属性的检查的HTML中的源）：

 ＆LT;输入ID =帐单没有TYPE =电台NAME =计费NG模型=person.billingVALUE =FALSENG-检查= person.billing =='假'/＆GT;
    ＆LT;输入ID =计费是TYPE =电台NAME =计费NG模型=person.billing值=TRUENG-检查=person.billing =='真'/＆GT ;
 

不过，这并不检查负载正确的单选按钮：

 ＆LT;输入ID =帐单没有TYPE =电台NAME =计费VALUE =FALSENG-检查=person.billing =='假' /＆GT;
    ＆LT;输入ID =计费是TYPE =电台NAME =计费值=TRUENG-检查=person.billing =='真'/＆GT;
 

注意：我需要检查对字符串布尔值在指令中NG-检查，因为布尔值总是回来从PostgreSQL的字符串。这显然​​是PostgreSQL中设计的一部分从具有布尔数据类型的列查询数据时。

当添加纳克模型指令，单选按钮不再被选中（至少在呈现的浏览器视图）。奇怪的是，我看着源和它清楚地检查正确的。什么是更奇怪的是，我必须点击单选按钮的两次的以'检查'它。我测试过这在最新版本的Chrome，FF和IE浏览器和它同样的问题，所有结果。

现在的问题是：添加NG-模式指令时，为什么会在HTML源代码中添加的单选按钮属性'检查'，但似乎没有标注单选按钮？此外，我为什么会得上是应该要检查的单选按钮，单击两次？

---

解决方案：
为了解决这个问题，我删除从单选按钮的NG-检查指令，并只能由@Cypher和@aet的建议使用NG-模式。然后我更换了属性的值的该指令NG价值的真与放大器; 假。之后，我在所设置的值。

HTML

 ＆LT;输入ID =帐单没有TYPE =电台NAME =计费NG模型=person.billingNG值=FALSE/＆GT ;
＆LT;输入ID =计费是TYPE =电台NAME =计费NG模型=person.billingNG值=真/＆GT;
 

角JS

  app.controller（'peopleCtrl'，函数（$范围，peopleFactory）{
    ...
    peopleFactory.getPerson（personParams）。然后（功能（数据）{
        $ scope.person =数据;
        / *从移动NG-检查* /
        $ scope.person.billing = data.billing =='真';
    }）;
    ...
};
 

解决方案

我认为你应该只使用NG-模式，应该为你工作好，这里是链接到角的 https://docs.angularjs.org/api/ng/input/input%5Bradio%5D

从例子中的code不应该是很难适应你的具体情况：

 ＆LT;脚本＆GT;
   功能Ctrl（$范围）{
      $ scope.color =蓝;
      $ scope.specialValue = {
         ID：12345，
         值：绿色
      };
   }
＆LT; / SCRIPT＆GT;
＆LT;形式NAME =myForm会NG控制器=CTRL＆GT;
   ＆LT;输入类型=电台NG-模式=色值=红＆GT;红＆LT; BR /＆GT;
   ＆LT;输入类型=电台NG-模式=色NG-值=specialValue＆GT;绿色＆LT; BR /＆GT;
   ＆LT;输入类型=电台NG-模式=色价值=蓝色＆GT;蓝＆LT; BR /＆GT;
   ＆LT; TT＆GT;彩色= {{色| JSON}}＆LT; / TT＆GT;＆LT; BR /＆GT;
＆LT; /表及GT;
 

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.

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

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.

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.

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?

---

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

解决方案

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-检查与NG-模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！