使用 ng-model 进行 ng-checked 的单选按钮

Posted 2023-02-22

【中文标题】使用 ng-model 进行 ng-checked 的单选按钮

【英文标题】：Radio Buttons ng-checked with ng-model

【发布时间】：2014-06-10 08:26:57

【问题描述】：

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

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

    <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源码会在单选按钮属性中添加'checked'，但貌似没有标记单选按钮？此外，为什么我必须在应该检查的单选按钮上单击两次？

---

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

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 和 ng-checked。 ng-checked 更像是一个只读复选框，它反映了一些其他值。如果您只是希望它开始检查，请将模型设置为 true。

【参考方案1】：

我认为你应该只使用 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>

【讨论】：

当从不同的控制器/范围切换回这个 raido button 的视图时，即使数据仍然正确存储，也不再检查预先检查的单选按钮。如何解决这个问题？

【参考方案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" />

【参考方案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>

希望我能帮上忙；）

【讨论】：

从技术上讲，应该使用vm.myWay :)

【参考方案4】：

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

【讨论】：

您应该包含您尝试过的代码以及您返回的任何错误。否则，这是一个更适合 Google 的问题，而不是 QA 网站。