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