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”,但似乎没有标记单选按钮?此外,为什么我必须在要被检查的单选按钮上点击两次? 解: 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> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |