单选按钮ng-checked with ng-model

Question

在我的HTML页面中，我有两组基于布尔的单选按钮：分别标记为“是”和“否” /值：分别为 True 和 False
。我正在从PostgreSQL数据库表中填充完整的表单，以允许经过身份验证的用户查看包含填充数据的表单，并编辑包含单选按钮的填充字段，然后保存将数据保存到DB的表单。所有其他文本字段都可以毫无问题地填充；这都是单选按钮的集合我在单选按钮的预选标记方面遇到了问题。

以下内容并未预先填充选中的前端（而是在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中的字符串布尔值，因为布尔值总是作为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" />

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>