AngularJS单选按钮奇怪的行为
AngularJS radiobutton strange behavior
我正在尝试做简单的事情:使用AngularJS将我的JSON对象列表放在表单上。我想将其中一个参数映射到 HTML 单选按钮控件。这是 HTML 模板:
<div ng-app="myApp" ng-controller='MainController'>
<div ng-repeat="channel in channels">
<p>Case {{ channel.schedule.timeOfDay }}</p>
<input type="radio" ng-model="channel.schedule.timeOfDay" ng-value="0" name="channel">Case 0</input>
<input type="radio" ng-model="channel.schedule.timeOfDay" ng-value="1" name="channel">Case 1</input>
<input type="radio" ng-model="channel.schedule.timeOfDay" ng-value="2" name="channel">Case 2</input>
<input type="radio" ng-model="channel.schedule.timeOfDay" ng-value="3" name="channel">Case 3</input>
<hr>
</div>
</div>
还有一个简单的控制器:
var app = angular.module('myApp', []);
app.controller('MainController', function ($scope) {
$scope.channels = [{
"id": 4,
"subject": null,
"body": "Votre utilisation de données a atteint (SMS) [Percentage]%",
"schedule": {
"dayOfWeek": 24,
"timeOfDay": 3,
"from": 1,
"to": 4
},
"channelType": 0
}, {
"id": 5,
"subject": null,
"body": "Votre utilisation de données a atteint (USSD) [Percentage]%",
"schedule": {
"dayOfWeek": 18,
"timeOfDay": 1,
"from": 0,
"to": 0
},
"channelType": 1
}, {
"id": 6,
"subject": "Avertissement",
"body": "Votre utilisation de données a atteint (E-Mail) [Percentage]%",
"schedule": {
"dayOfWeek": 33,
"timeOfDay": 3,
"from": 15,
"to": 22
},
"channelType": 2
}]
});
我为这个例子创建了jsfiddle/
所以,正如你所看到的,我正在将channel.schedule.timeOfDay映射到单选按钮控件,它来了,奇怪的行为。单选按钮不反映第一个和第二个数组元素的值,但反映第三个数组元素的值。有人请解释一下发生了什么?
也花了我一点时间,将您的 html 更改为:(请注意,每个选项组的名称必须是唯一的)
<div ng-app="myApp" ng-controller='MainController'>
<div ng-repeat="channel in channels | orderBy:'body': false">
<p>Case {{ channel.schedule.timeOfDay }} {{ channel.id }}</p>
<input type="radio" ng-model="channel.schedule.timeOfDay" ng-value="0" name="t{{channel.id}}">Case 0</input>
<input type="radio" ng-model="channel.schedule.timeOfDay" ng-value="1" name="t{{channel.id}}">Case 1</input>
<input type="radio" ng-model="channel.schedule.timeOfDay" ng-value="2" name="t{{channel.id}}">Case 2</input>
<input type="radio" ng-model="channel.schedule.timeOfDay" ng-value="3" name="t{{channel.id}}">Case 3</input>
<hr>
</div>
相关文章:
- Angularjs无法将单选按钮与嵌套范围内的模型绑定
- AngularJS中没有选择多个单选按钮
- 在AngularJS中向控制器发送多个随机单选按钮值
- Angularjs 单选按钮变为多个选定状态
- 嵌套ng中的Angularjs单选按钮重复未选中
- Angularjs:文本字段只需要勾选单选按钮
- 将单选按钮值绑定到控制器(使用angularjs 1.5)
- AngularJs:默认情况下未选择单选按钮
- AngularJS:访问控制器中的单选按钮值更改
- 如何使用 angularJS 在 IONIC 中设置选定的单选按钮
- 切换单击angularjs上的单选按钮
- Angularjs单选按钮未使用名称进行选择
- AngularJS-使用ng repeat构建的单选按钮的设置值
- 加载时未检查AngularJS单选按钮
- 如何使用 AngularJS 在页面加载时通过查询字符串值来设置单选按钮值
- 如何在AngularJS(ng-repeat)中获取选定的单选按钮数据
- AngularJs 单选按钮脏验证不起作用
- 单选按钮值更改在 AngularJS 中不起作用
- 来自单选按钮angularjs的数据绑定
- 在单选按钮angularjs中选择默认值