[英]Checkbox is not working properly with ng-repeat, AngularJs
I want to make multiselect checkbox using ng-repeat. 我想使用ng-repeat进行多选复选框。 It is working fine if I don't have pre-selected checkbox.
如果我没有预选复选框,则工作正常。 But when I have preselected checkbox then its behaviour is totally unusual.
但是,当我预选复选框时,它的行为是完全不寻常的。
<div ng-repeat="account in accounts">
<input ng-model="selectedAccounts[account.id]"
ng-checked="{{account.lastchecked}}" type="checkbox">
</div>
In Controller I got selected id as: 在控制器中,我选择的ID为:
$scope.selectedAccounts = [];
angular.forEach($scope.selectedAccounts, function(value, key) {
if(value == true) {
selectedIds.push(key);
}
});
The problem here is that I have to initialise selectedAccounts with initial array. 这里的问题是我必须用初始数组初始化selectedAccounts。 If I don't do this then it gives me undefined.
如果我不这样做,那么它将给我未定义的含义。 When I have 'lastchecked' true for some accounts then it shows pre-checked values according to lastchecked but when I try to retreive $scope.selectedAccounts it give me empty array.
当我为某些帐户“ lastchecked”为true时,它会根据lastchecked显示预检查的值,但是当我尝试获取$ scope.selectedAccounts时,它将给我空数组。 But when I manually check/uncheck each option then $scope.selectedAccounts give me correct result.
但是当我手动选中/取消选中每个选项时,$ scope.selectedAccounts给我正确的结果。
Here is how i would do it : 这是我要怎么做:
$scope.context = {accounts : :[]};// init is important to place the variable in that scope on not in a child
<div ng-repeat="account in context.accounts">
<input ng-model="account.lastchecked" ng-checked="account.lastchecked"
ng-true-value="true" ng-false-value="false" type="checkbox">
</div>
Ng-true-value and ng-false-value ensure that the value will be the boolean true/false instead of strings. Ng-true-value和ng-false-value确保该值是布尔值true / false,而不是字符串。
After to get the selectedAccount you just search.filter account with lastchecked==true
获得选定的帐户后,您只需使用
lastchecked==true
.filter帐户
The indermediary object context is to avoid scope issues, scope inheritance fails on simple fields. 中间对象上下文是为了避免范围问题,范围继承在简单字段上失败。 This is a limit of javascript.
这是javascript的限制。 In angularJS this is called DOT notation.
在angularJS中,这称为DOT表示法。
Go through this 经历这个
var jimApp = angular.module("mainApp", []); jimApp.controller('mainCtrl', function($scope){ $scope.selectedAccounts = {"3":true}; $scope.accounts = [{id:1, name:"account1", checked: true}, {id:2, name:"account2"}, {id:3, name:"account3"}] });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="mainApp" ng-controller="mainCtrl"> <div ng-repeat="account in accounts"> <input ng-model="selectedAccounts[account.id]" ng-checked="selectedAccounts[account.id]" type="checkbox">{{account.name}} </div> <div>{{selectedAccounts}}</div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.