使用 ng-repeat 时默认选中单选按钮
Radio button checked by default when using ng-repeat
我一直想使用 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>
代码的目的是选中第一个单选按钮,取消选中其他按钮。该代码有一个问题:它不起作用。但至少它给出了我正在尝试做的事情的想法:我希望默认选中其中一个单选按钮,无论它是哪个。
您不需要 checked="checked"
,我认为如果您将模型设置为其中一个值,angular 会自行处理。类似于:
club.role = securityGroups.slice(0,1)[0].securityGroupCode;
此外,示波器可能会绊倒你,模型可能必须是 $parent.club.role
单选按钮将检查输入属性的值是否等于单选按钮上应用的模态值。
<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" 在 angular 上下文中不起作用。您可以在控制器中显式设置单选按钮的值,也可以像我在上面所做的那样在视图本身中管理它 example.But 模态应该根据 inmput 元素上的值属性等同。
例如,如果模态是三个单选按钮上的 x,并且每个单选按钮具有不同的值,如 a、b 和 c。那么 x 必须等于要检查的任何值。
你不用担心checked。
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'];
});
在这里 fiddle 工作:https://jsfiddle.net/qnw8ogrk/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];
<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>
我一直想使用 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>
代码的目的是选中第一个单选按钮,取消选中其他按钮。该代码有一个问题:它不起作用。但至少它给出了我正在尝试做的事情的想法:我希望默认选中其中一个单选按钮,无论它是哪个。
您不需要 checked="checked"
,我认为如果您将模型设置为其中一个值,angular 会自行处理。类似于:
club.role = securityGroups.slice(0,1)[0].securityGroupCode;
此外,示波器可能会绊倒你,模型可能必须是 $parent.club.role
单选按钮将检查输入属性的值是否等于单选按钮上应用的模态值。
<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" 在 angular 上下文中不起作用。您可以在控制器中显式设置单选按钮的值,也可以像我在上面所做的那样在视图本身中管理它 example.But 模态应该根据 inmput 元素上的值属性等同。
例如,如果模态是三个单选按钮上的 x,并且每个单选按钮具有不同的值,如 a、b 和 c。那么 x 必须等于要检查的任何值。
你不用担心checked。
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'];
});
在这里 fiddle 工作:https://jsfiddle.net/qnw8ogrk/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];
<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>