AngularJS:根据ngModel未使用ngRepeat选择单选按钮
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AngularJS:根据ngModel未使用ngRepeat选择单选按钮相关的知识,希望对你有一定的参考价值。
默认情况下,不会根据模型值检查单选按钮。
angular.module('app', [])
.controller('MyCtrl', ($scope) => {
$scope.decideVote ={
vote: {
yes: "Yes",
no: "No",
maybe: "Maybe"
//if i have more values here, i will get more radio buttons
}
}
//uncomment for testing.
$scope.serverVoted= {
vote: {yes:"Yes"}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
<form name="myForm">
<p>Select Vote</p>
<ul>
<li ng-repeat="i in decideVote.vote">
<label>
{{i}}
<input type="radio" name="same"
ng-model="serverVoted.vote" ng-value="i" />
</label>
</li>
</ul>
</form>
<div>
如angularjs docs中所述,应根据模型值自动检查无线电。我会在这里粘贴工作样本,但实际情况是这样的。
组件定义为radioButtonsFromJsonObj,可以有许多元素作为radioButtonsFromJsonObj,并且可能使用不同的Json对象来填充单选按钮,但模型对于特定的单选按钮组是相同的。
但是当我再次打开页面并且模型具有正确的值时,单选按钮不会按照模型进行检查。
此外,实际场景就像生成模板的组件,并且传递绑定以便为每个元素动态获取ngModel.ngModel设置正确但是当尝试重新打开并从服务器读取数据时,它不会自动检查。所以尝试在上面创建相同的场景。内部组件具有init块和构造函数块,只需创建$ ctrl变量。
绑定如下
bindings: {
model: '=ngModel'
}
在模板中有ngRepeat并在每个迭代中生成这样的模板。
<input type="radio" name="same" ng-model="$ctrl.model" ng-value="i" />
主html可以有很多元素。
<radioButtonsFromJsonObj ng-model="request.Voting1"> </radioButtonsFromJsonObj >
<radioButtonsFromJsonObj ng-model="request.Voting2"> </radioButtonsFromJsonObj >
答案
serverVoted.vote是对象,所以用这个ng-model =“serverVoted.vote.yes”替换
angular.module('app', [])
.controller('MyCtrl', ($scope) => {
$scope.decideVote ={
vote: {
yes: "Yes",
no: "No",
maybe: "Maybe"
//if i have more values here, i will get more radio buttons
}
}
//uncomment for testing.
$scope.serverVoted= {
vote: {yes:"Yes"}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
<form name="myForm">
<p>Select Vote</p>
<ul>
<li ng-repeat="i in decideVote.vote">
<label>
{{i}}
<input type="radio" name="same" ng-model="serverVoted.vote.yes" ng-value="i" />
</label>
</li>
</ul>
</form>
<div>
另一答案
错误
$scope.serverVoted= { vote: {yes:"Yes"} }
代替:
$scope.server = { vote: "Yes" };
DEMO
angular.module('app', [])
.controller('MyCtrl', ($scope) => {
$scope.decideVote ={
vote: {
yes: "Yes",
no: "No",
maybe: "Maybe"
//if i have more values here, i will get more radio buttons
}
}
//uncomment for testing.
$scope.serverVoted= {vote: "Yes"};
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
<form name="myForm">
<p>Select Vote</p>
<ul>
<li ng-repeat="i in decideVote.vote">
<label>
{{i}}
<input type="radio" name="same"
ng-model="serverVoted.vote" ng-value="i" />
</label>
</li>
</ul>
</form>
<div>
以上是关于AngularJS:根据ngModel未使用ngRepeat选择单选按钮的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 ngModel 在 angularjs 指令中手动重新运行格式化程序链?