angular js ng-repeat 范围内的单选按钮列表,默认选中 [英] angular js ng-repeat a radio button list from scope with a default checked
本文介绍了angular js ng-repeat 范围内的单选按钮列表,默认选中的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
app.controller('radiusController', function($scope){$scope.radii = [{id:.25, 选中:"false", name:"1/4 Mile"},{id:.5, 选中:"false", name:"1/2 Mile"},{id:1, 选中:"false", name:"1 Mile"},{id:2, 检查:"true", name:"2 Mile"},{id:3, 选中:"false", name:"3 Mile"},{id:4, 选中:"false", name:"4 Mile"},{id:5, 选中:"false", name:"5 Mile"}];$scope.handleRadioClick = 函数(半径){window.radiochecked = radius.id;};});<li ng-repeat="radius in radius" id="selectradius-{{radius.id}}"><div class="radio"><标签><input type="radio" name="radius"ng-model="radius.checked"ng-change="handleRadioClick(radius)">{{radius.name}}标签>
如何根据scope radii的勾选值设置默认单选按钮进行勾选?在这种情况下,默认情况下应选中2 Mile".
plunker:http://plnkr.co/edit/RP9SpO1qGjn5Ua6pZJ3D?p=preview
解决方案
简单.尽管 angular 文档没有提到 ng-checked,但它是可用的.
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.
plunker: http://plnkr.co/edit/RP9SpO1qGjn5Ua6pZJ3D?p=preview
解决方案
Simple. Eventhough the angular docs do not mention ng-checked, it is available.
<input type="radio" name="radius"
ng-change="handleRadioClick(radius)"
ng-checked="radius.checked">
这篇关于angular js ng-repeat 范围内的单选按钮列表,默认选中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文