我创建了一组单选按钮,但没有为每个组正确分配。当我单击单选按钮组之一的按钮之一时,该按钮不起作用。
场景 1
<div ng-repeat="m in meals">
<label class="linked-radio"><span class="radio primary"><span></span>
</span>{{ m.name }}
<input type="radio" id="{{ m.id }}" ng-model="mealselected" ng-checked="isMealSelected(m.id);"/>
</label>
</div>
The radio button is not check when click
塞纳里奥 2
<div ng-repeat="m in meals">
<input type="radio" id="{{ m.id }}" ng-model="mealselected"/>
<label class="linked-radio">
<span class="radio primary">
<span></span>
</span>{{ m.name }}
</label>
</div>
The radio button is checked but only the first one in each every group of radio buttons.
最佳答案
radiobutton
由 name
属性分组,在下面的代码片段中,我只创建了 2 个单选按钮组。对于 label
,您应该使用 for
属性并将其与相关单选按钮的 ID 绑定(bind)。
angular.module("app", [])
.controller("myCtrl", function($scope) {
$scope.mealselected = false;
$scope.meals = [
{
id: 1,
name: 'meal1'
},
{
id: 2,
name: 'meal2'
},
{
id: 3,
name: 'meal3'
}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
<h1>Group1</h1>
<div ng-repeat="m in meals">
<label class="linked-radio" for="{{ m.id }}"><span class="radio primary"><span></span>
</span>{{ m.name }}
<input type="radio" id="{{ m.id }}" name="group1" ng-model="mealselected" />
</label>
</div>
<h1>Group2</h1>
<div ng-repeat="m in meals">
<input type="radio" id="{{ m.id }} + 2" name="group2" ng-model="mealselected" />
<label class="linked-radio" for="{{ m.id }} + 2">
<span class="radio primary">
<span></span>
</span>{{ m.name }}
</label>
</div>
</div>
关于javascript - Ng-repeat 不同的单选按钮组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43817605/