angular js ng-repeat 范围内的单选按钮列表,默认选中 [英] angular js ng-repeat a radio button list from scope with a default checked

查看:32
本文介绍了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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆