在我的
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>
