Html 使用 ng-repeat 时默认选中单选按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29539549/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Radio button checked by default when using ng-repeat
提问by Jadiel de Armas
I have been wanting to have a radio button checked out of a list of radio buttons that I present in the screen using ng-repeat, but my code does not work. This is what I am doing:
我一直想从我使用 ng-repeat 显示在屏幕上的单选按钮列表中检查一个单选按钮，但我的代码不起作用。这就是我正在做的：
<div class="clubRole" data-ng-if="club.checked">
<div data-ng-repeat="role in securityGroups.slice(0,1)">
<input type="radio" class="clubRole" data-ng-model="club.role" data-ng-value="role.securityGroupCode" checked="checked"> {{role.description}}
</div>
<div data-ng-repeat="role in securityGroups.slice(1,securityGroups.length+1)">
<input type="radio" class="clubRole" data-ng-model="club.role" data-ng-value="role.securityGroupCode"> {{role.description}}
</div>
</div>
The intention of the code is to get the first radio button checked, and the others unchecked. That code has a problem: it does not work. But at least it gives the idea of what I am trying to do: I want one of the radio buttons checked by default, no matter which one it is.
代码的目的是选中第一个单选按钮，而不选中其他单选按钮。该代码有一个问题：它不起作用。但至少它给出了我想要做什么的想法：我希望默认情况下选中一个单选按钮，无论它是哪个。
回答by squiroid
Radio button will be check if the value of the input attribute is equal to the value of modal applied on the radio button.
单选按钮将检查输入属性的值是否等于应用在单选按钮上的模态值。
<div ng-repeat="val in ['a','b','c']">
<input
type="radio"
name="val"
data-ng-model="role"
data-ng-value="val"
ng-init="$index==0?(role=val):''"
/>
{{val}}
</div>
Checked="checked" will not work in angular context. You can either set the value of radio button explicitly in controller or you can manage it in the view itself as i did in the above example.But the modal should be equate according to the value attribute on the inmput element.
Checked="checked" 在角度上下文中不起作用。您可以在控制器中显式设置单选按钮的值，也可以在视图本身中管理它，就像我在上面的示例中所做的那样。但是模式应该根据输入元素上的 value 属性等同。
For example if modal is x on three radio button's and each radio button have different value like a,b and c. then x must be equal to any of the value to be checked.
例如，如果模态是三个单选按钮上的 x，并且每个单选按钮具有不同的值，如 a、b 和 c。那么 x 必须等于要检查的任何值。
回答by bm1729
You don't need to worry about checked.
您无需担心检查。
HTML:
HTML：
<div ng-app="app">
<div ng-controller="mainController">
<label ng-repeat="option in options">
<input type="radio" ng-model="$parent.selected" ng-value="option"/>{{option}}
</label>
</div>
</div>
JavaScript:
JavaScript：
var appModule = angular.module('app', []);
appModule.controller('mainController', function($scope) {
$scope.selected = 'red';
$scope.options = ['red', 'blue', 'yellow', 'green'];
});
Working fiddle here: https://jsfiddle.net/qnw8ogrk/1/
在这里工作小提琴：https: //jsfiddle.net/qnw8ogrk/1/
回答by sarkiroka
if you use a primitive type in list, the answer of bm1729 is correct, but if you use objects in the list, then look this example: https://jsfiddle.net/9chd58mk/2/
如果你在列表中使用原始类型，bm1729 的答案是正确的，但如果你在列表中使用对象，那么看看这个例子：https://jsfiddle.net/9chd58mk/2/
the first part is bad, because the selected object is look like same with a list item, but it doesn't same by reference. the == operator is false in this case
第一部分不好，因为所选对象看起来与列表项相同，但引用不同。== 运算符在这种情况下为假
$scope.selected = {c:'red'};
$scope.options = [{c:'red'}, {c:'blue'}, {c:'yellow'}, {c:'green'}];
but the second and third examples are use the list item reference, and the radio button checked. the == operator is true in this case
但是第二个和第三个示例使用列表项引用，并且选中了单选按钮。== 运算符在这种情况下为真
$scope.options3 = [{c:'red'}, {c:'blue'}, {c:'yellow'}, {c:'green'}];
$scope.selected3 = $scope.options3[0];
回答by Victor
You don't need checked="checked", I think angular will take care of it itself if you set the model to one of the values. Something like:
您不需要checked="checked"，我认为如果您将模型设置为其中一个值，angular 会自行处理。就像是：
club.role = securityGroups.slice(0,1)[0].securityGroupCode;
Also, the scope may trip you up here, the model may have to be $parent.club.role
此外，范围可能会绊倒你，模型可能必须是 $parent.club.role
回答by Mayur Vaghasiya
<md-radio-group ng-model="data.group3">
<md-radio-button value="{{o._id}}" class="md-primary" ng-repeat="o in lstDataRecord" ng-click="updTemplateId(o._id)">
<div flex-gt-sm="50" style="height: 150px; width: 250px;">
<img src="{{PageInfo_PATH}}{{o.imgUrl}}" />
{{o.displayName}}
</div>
</md-radio-button>
<md-radio-button value="active" class="md-primary" [checked]='true'> </md-radio-button>
</md-radio-group>
