在我的
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的官方文档的链接
原文链接:https://www.f2er.com/angularjs/142832.html示例中的代码不应该难以适应您的具体情况:
<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>