15

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

4 回答 4

36

我认为您应该只使用 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>
于 2014-04-24T20:59:46.083 回答
7

我解决了我的问题只是使用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" />
于 2016-01-26T08:26:35.880 回答
3

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

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

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

我希望我能提供帮助；）

于 2016-07-14T17:35:11.813 回答
1

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

于 2016-04-08T07:11:21.043 回答