javascript - 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 设置正确,但是当尝试重新打开并从服务器读取数据时,它不会自动检查。所以试图在上面创建相同的场景。内部组件有初始化块和构造器块,只需创建一个 $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 >
解决方案
错误
$scope.serverVoted= { vote: {yes:"Yes"} }
反而:
$scope.server = { 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"};
})
<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>
推荐阅读
- sql - 将日期/时间范围拆分为多行
- javascript - 如何使我的标题移动响应?
- haskell - 在 Haskell 的 do 块中使用 let 中的状态
- reactjs - 具有自定义数据提供者的自定义管理组件
- html - 如何解决 iframe 的填充问题?
- c# - Web API 空白参数值被转换为 null
- eslint - gulp-eslint 未输出到文件 - 无法正确配置 writableStream
- brain.js - 从json导入LSTM网络的brain.js问题
- sql - 使用 MAX 和 GROUP BY 时如何只得到一个结果
- python - 当我尝试为线性回归运行此代码时,输入包含 NaN、无穷大或对于 dtype('float64') 错误而言太大的值