使用ng-repeat时默认选中单选按钮

时间:2015-04-09 13:14:37

标签: angularjs html5 radio-button

我一直想要使用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>

代码的目的是检查第一个单选按钮,并取消选中其他按钮。该代码有一个问题:它不起作用。但至少它给出了我想要做的事情的想法:我想要默认选中一个单选按钮,无论它是哪一个。

5 个答案:

答案 0 :(得分:15)

单选按钮将检查输入属性的值是否等于单选按钮上应用的模态值。

 <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”在角度上下文中不起作用。你可以在控制器中显式设置单选按钮的值,也可以像在上面的例子中那样在视图中管理它。但是模态应该根据inmput元素的value属性来等同。

例如,如果三个单选按钮上的模态为x,并且每个单选按钮具有不同的值,如a,b和c。那么x必须等于要检查的任何值。

Plunker

答案 1 :(得分:8)

您无需担心已检查。

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的:

var appModule = angular.module('app', []);

appModule.controller('mainController', function($scope) {

$scope.selected = 'red';
$scope.options = ['red', 'blue', 'yellow', 'green'];

});

在这里工作小提琴:https://jsfiddle.net/qnw8ogrk/1/

答案 2 :(得分:1)

您不需要checked="checked",我认为如果您将模型设置为其中一个值,angular会自行处理它。类似的东西:

club.role = securityGroups.slice(0,1)[0].securityGroupCode;

此外,范围可能会使您绊倒,模型可能必须为$parent.club.role

答案 3 :(得分:1)

如果你在列表中使用基本类型,bm1729的答案是正确的,但是如果你在列表中使用对象,那么看看这个例子:https://jsfiddle.net/9chd58mk/2/

第一部分不好,因为所选对象看起来与列表项相同,但它不一样引用。在这种情况下,==运算符为false

$scope.selected = {c:'red'};
$scope.options = [{c:'red'}, {c:'blue'}, {c:'yellow'}, {c:'green'}];

但第二个和第三个示例是使用列表项引用,并选中单选按钮。在这种情况下,==运算符为真

$scope.options3 = [{c:'red'}, {c:'blue'}, {c:'yellow'}, {c:'green'}];
$scope.selected3 = $scope.options3[0];

答案 4 :(得分:0)

  <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>