一尘不染

单选按钮ng-checked with ng-model

angularjs

在我的HTML页面中,我有两组基于布尔的单选按钮:分别标记为“是”和“否” /值:分别为 TrueFalse
。我正在从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';
    });
    ...
};

阅读 358

收藏
2020-07-04

共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>
2020-07-04