javascript angular js ng-repeat 范围内的单选按钮列表，默认选中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25389701/
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
angular js ng-repeat a radio button list from scope with a default checked
提问by webmandman
app.controller('radiusController', function($scope){
$scope.radii = [
{id:.25, checked:"false", name:"1/4 Mile"},
{id:.5, checked:"false", name:"1/2 Mile"},
{id:1, checked:"false", name:"1 Mile"},
{id:2, checked:"true", name:"2 Mile"},
{id:3, checked:"false", name:"3 Mile"},
{id:4, checked:"false", name:"4 Mile"},
{id:5, checked:"false", name:"5 Mile"}
];
$scope.handleRadioClick = function(radius){
window.radiochecked = radius.id;
};
});
<li ng-repeat="radius in radii" id="selectradius-{{radius.id}}">
<div class="radio">
<label>
<input type="radio" name="radius"
ng-model="radius.checked"
ng-change="handleRadioClick(radius)">
{{radius.name}}
</label>
</div>
</li>
How do I set the default radio button to be checked based on the checked value of scope radii? In this case the "2 Mile" should be checked by default.
如何根据范围半径的选中值设置要选中的默认单选按钮？在这种情况下，默认情况下应选中“2 Mile”。
plunker: http://plnkr.co/edit/RP9SpO1qGjn5Ua6pZJ3D?p=preview
plunker：http://plnkr.co/edit/RP9SpO1qGjn5Ua6pZJ3D?p=preview
回答by webmandman
Simple. Eventhough the angular docs do not mention ng-checked, it is available.
简单的。尽管 angular 文档没有提到 ng-checked，但它是可用的。
<input type="radio" name="radius"
ng-change="handleRadioClick(radius)"
ng-checked="radius.checked">
回答by webmandman
you can set the ng-model to the specified value you want in controller
您可以在控制器中将 ng-model 设置为您想要的指定值
$scope.radius.checked = $scope.radii[0]
回答by Sergio Espallargas
Create an object to hold the selected value, like:
创建一个对象来保存选定的值，例如：
$scope.selectedValue = { id: 0 };
$scope.selectedValue = { id: 0 };
Update ng-model and value attributes like shown below:
更新 ng-model 和 value 属性，如下所示：
<input type="radio" name="radius" ng-change="handleRadioClick()"
ng-model="selectedValue.id" value="{{radius.id}}">
See working sample: http://plnkr.co/edit/zpNItMx13YPH0guvod0D?p=preview
请参阅工作示例：http: //plnkr.co/edit/zpNItMx13YPH0guvod0D?p=preview
回答by vp_arth
All simple here
一切都简单到这里
ngModelholds a model(where we want store selected item)ngValueholds a value(what item related to this input)
ngModel保存一个模型（我们想要存储所选项目的位置）ngValue保存一个值（与此输入相关的项目）
To access scopewhich we want, we should step up from ngRepeatscope with $parent.
要访问scope我们想要的内容，我们应该ngRepeat使用$parent.
<div ng-repeat="radius in radii">
<label>
<input type="radio" name="radius"
ng-model="$parent.model"
ng-value="radius" />
{{radius.name}}
</label>
</div>
