[英]Wrong radio input checked on load based on ng-model and ng-value
I have some basic example of form with radio inputs DEMO on PLNKR : 我在PLNKR上有一些带有无线电输入DEMO的表单的基本示例:
<form class="some-inputs">
<div ng-repeat="da in data">
<span>{{$index}}: {{da}}</span>
<label>
<input type="radio" id="lock-{{$index}}"
name="lock-choice-{{$index}}"
ng-model="mdl['account-{{$index}}']['blocked']"
ng-value="da.blocked">
<span>blocked</span>
</label>
<label>
<input type="radio" id="unrealized-{{$index}}"
name="lock-choice-{{$index}}"
ng-model="mdl['account-{{$index}}']['unrealized']"
ng-value="da.unrealized">
<span>not blocked</span>
</label>
</div>
</form>
As you can see, I'm not using ng-checked, just ng-model and ng-value. 如您所见,我没有使用ng-checked,而是使用ng-model和ng-value。 Also there are objects with properties printed, for comparison purposes.
还有一些对象带有打印的属性,以进行比较。
Question is, why in every example, second radio button is checked, even if it's value is false - thus first radio which is truthy should be checked - ? 问题是,为什么在每个示例中都检查了第二个单选按钮,即使它的值是false-因此也应检查第一个为真的单选按钮-?
When I delete ng-value attributes from input, no radios are checked, even if properties from ng-models already have values which could make it happen.. 当我从输入中删除ng-value属性时,即使ng-models中的属性已经具有可以使其实现的值,也不会检查任何无线电。
When doing ng-repeat
with objects, use (key, value)
as the iterator: 对对象执行
ng-repeat
时,请使用(key, value)
作为迭代器:
̶<̶d̶i̶v̶ ̶n̶g̶-̶r̶e̶p̶e̶a̶t̶=̶"̶d̶a̶ ̶i̶n̶ ̶d̶a̶t̶a̶"̶>̶
<div ng-repeat="(key,da) in data">
It makes the HTML clearer. 它使HTML更清晰。
angular.module('app', []) .controller('ctrl', function($scope) { $scope.data = { "account-0":{ "blocked":true, }, "account-1":{ "blocked":false, }, "account-2":{ "blocked":false, }, "account-3":{ "blocked":true, } }; $scope.mdl = {}; angular.forEach($scope.data, (value, key)=> { $scope.mdl[key] = {choice: value.blocked?'blocked':'not blocked'}; }); })
<script src="//unpkg.com/angular/angular.js"></script> <body ng-app="app" ng-controller="ctrl"> <form name="form1"> <div ng-repeat="(key, da) in data"> <span>{{key}}</span> <label> <input type="radio" id="{{key}}-blocked" name="block-choice-{{key}}" ng-model="mdl[key].choice" ng-value="'blocked'"> <span>blocked</span> </label> <label> <input type="radio" id="{{key}}-not-blocked" name="block-choice-{{key}}" ng-model="mdl[key].choice" ng-value="'not blocked'"> <span>not blocked</span> </label> <label> <input type="radio" id="{{key}}-undecided" name="block-choice-{{key}}" ng-model="mdl[key].choice" ng-value="'undecided'"> <span>undecided</span> </label> </div> <hr> <div ng-repeat="(k,v) in mdl"> {{k}} {{v}} </div> </form> </body>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.