我试图在一个循环中填充多组单选按钮,并使用组名和索引的组合作为名称,以便唯一地对单选按钮进行分组。问题是-仅循环中的最后一组选中了单选按钮。循环中的其他组没有检查。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - Dynamically populate Radio buttons in a loop</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
</head>
<body ng-app="radioSetsExample">
<script>
angular.module('radioSetsExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.groups = [{
name: 'group_one',
type: 'CHOOSE'
}, {
name: 'group_two',
type: 'ADD'
},
{
name: 'group_three',
type: 'ADD'
}];
}]);
</script>
<form ng-controller="ExampleController">
<div class="radio-inline" ng-repeat="group in groups">
{{group.name}} - TYPE:
<label>
<input type="radio" name="{{group.name}}_{{$index}}" value="CHOOSE" ng-model="group.type">
Choose
</label>
<label>
<input type="radio" name="{{group.name}}_{{$index}}" value="ADD" ng-model="group.type">
Add
</label>
</div>
</form>
</body>
</html>
Plunker
如果我在循环中为每个组手动指定唯一的“名称”并且不使用索引,则一切正常。但是我真的不能这样做,因为列表将是动态的,并且没有唯一的名称。我必须依靠索引为每个组生成唯一的名称。
我在这里想念什么?
最佳答案
您可以使用name="{{group.name+'_'+$index}}"
代替name="{{group.name}}_{{$index}}"
,然后应该可以正常工作。
<form ng-controller="ExampleController">
<div class="radio-inline" ng-repeat="group in groups">
{{group.name}} - TYPE:
<label>
<input type="radio" name="{{group.name+'_'+$index}}" value="CHOOSE" ng-model="group.type">
Choose
</label>
<label>
<input type="radio" name="{{group.name+'_'+$index}}" value="ADD" ng-model="group.type">
Add
</label>
</div>
</form>
关于javascript - Angular :循环中的单选按钮组填充(ng-repeat)-选择不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/37511234/