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

Posted

技术标签:

【中文标题】使用 ng-repeat 时默认选中单选按钮【英文标题】:Radio button checked by default when using ng-repeat 【发布时间】:2015-06-14 21:08:28 【问题描述】:

我一直希望使用 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>

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

【问题讨论】:

你应该使用data-ng-model="$parent.club.role",因为你使用了ng-if @pankajparkar,我相信是 ng-repeat 创建了自己的范围,而不是 ng-if @Victor ng-if 也新建了一个作用域,需要看docs.angularjs.org/api/ng/directive/ngIf 【参考方案1】:

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

 <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" 在角度上下文中不起作用。您可以在控制器中显式设置单选按钮的值,也可以像我在上面的示例中那样在视图本身中对其进行管理。但是根据输入元素上的 value 属性,模态应该是相等的。

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

Plunker

【讨论】:

【参考方案2】:

你不必担心检查。

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/

【讨论】:

【参考方案3】:

您不需要checked="checked",如果您将模型设置为其中一个值,我认为 Angular 会自行处理。比如:

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

另外,范围可能会让你绊倒,模型可能必须是$parent.club.role

【讨论】:

【参考方案4】:

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

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

$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];

【讨论】:

【参考方案5】:
  <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_PATHo.imgUrl" />
                                                            o.displayName
                                                        </div>
                                                    </md-radio-button>
                                                    <md-radio-button value="active" class="md-primary" [checked]='true'> </md-radio-button>
                                                </md-radio-group>

【讨论】:

您的答案只是代码。请通过一些解释改进它。

以上是关于使用 ng-repeat 时默认选中单选按钮的主要内容,如果未能解决你的问题,请参考以下文章

如何在 MVC 中使用 Razor 时取消选中默认单选按钮?

Axure:切换单选按扭,控制界面显示不同内容

AngularJS、ngRepeat 和默认选中单选按钮

将单选按钮绑定到复杂对象可防止选中

为所有 ng-repeat 行自动选择单选按钮

单选按钮“选中”属性不起作用