angularjs – 使用ng模型检查的无线电按钮

在我的 HTML 页面中,我有两组基于布尔的单选按钮：标签：“是”和“否”/值：True和False.我从Postgresql 数据库表填充一个完整的表单,允许经过身份验证的用户查看填充数据的表单,并编辑包含单选按钮的填充字段,然后保存将数据保存到数据库的表单.所有其他文本字段填充无问题;它是收集单选按钮我有一个问题,预先勾选单选按钮.

以下不预先填写前端检查(但是添加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源代码在“单选按钮”属性中添加“checked”,但似乎没有标记单选按钮？此外,为什么我必须在要被检查的单选按钮上点击两次？

解：
要解决这个问题,我从单选按钮中删除了ng检查的指令,并且只使用@Cypher和@aet建议的ng模型.然后我使用指令ng-value“true”& “假”.之后,我在控制器中设置值.

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

我想你应该只使用ng模型,并且应该适合你,这里是与角 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>

angularjs – 使用ng模型检查的无线电按钮

相关文章