Angular 在 ng-change 上加载为 ng-checked='true' 的复选框没有看到更改为 false
Angular checkbox loading as ng-checked='true' on ng-change not seeing the change to false
我的 ng-repeat 复选框有问题。
在模态加载时,它们的状态是从 $http.get
他们加载正常。但是如果它们在单击 ng-change
时加载时设置为 true
dosent 似乎注册了它但是当再次单击时它看到更改为 true。这显示在我的 pre
和 console.log()
我会把代码放上去
哈巴狗
form.form-horizontal(name='sysInfo' ng-controller='sysInfo' ng-repeat='sysName in sysNames')
label{{sysName.friendyName}}
input(type='checkbox' ng-change='submit(sysName.selected, options.sysBackend, sysName.id)' ng-model='sysName.selected' ng-checked='select.indexOf(sysName.id) != -1')
Angular
app.controller('sysInfo', sysInfo);
function sysInfo($scope, $rootScope, $http){
$scope.options = function(foo) {
var config = {params :{fooName: foo}}
$('#myModal').modal();
$http.get('/api/boo', config)
.then(function(resp) {
var selectArray = [];
$rootScope.select = [];
$rootScope.options = res.data.data[0];
$rootScopesysNames = resp.data.sysInfo;
$rootScope.sysLinks = resp.data.sysNamedLinks;
angular.forEach(resp.data.sysNamedLinks, function(value1, key1){
angular.forEach(resp.data.sysInfo, function(value0, key0){
if(value1.sysLinkId === value0.id){
selectArray.push(value0.id)
$rootScope.select = selectArray
}
})
})
})
}
res.data.data[0] = {id:1, sysBackend:'fumanchu'}
resp.data.sysInfo = [{id: 1, friendlyName:foo},{id: 2, friendlyName:fo},{id: 3, friendlyName:boo},]
resp.data.sysNamedLinks = [{sysLinkId:1},{sysLinkId:2},{sysLinkId:3}]
发生这种情况是因为 ng-model
和 ng-checked
之间存在一些冲突。
参考下面的例子,复选框被ng-checked
表达式初始化为checked
但是ng-model
值是false
.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app ng-init="test=false;checked=true;">
<input type="checkbox" ng-model="test" ng-checked="checked === true">
{{test}}
</div>
第二个例子,没有冲突,运行良好。
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app ng-init="test=true;checked=true;">
<input type="checkbox" ng-model="test" ng-checked="checked === true">
{{test}}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app ng-init="test=false;checked=true;">
<input type="checkbox" ng-model="test" ng-checked="checked === true">
{{test}}
</div>
我的 ng-repeat 复选框有问题。
在模态加载时,它们的状态是从 $http.get
他们加载正常。但是如果它们在单击 ng-change
时加载时设置为 true
dosent 似乎注册了它但是当再次单击时它看到更改为 true。这显示在我的 pre
和 console.log()
我会把代码放上去
哈巴狗
form.form-horizontal(name='sysInfo' ng-controller='sysInfo' ng-repeat='sysName in sysNames')
label{{sysName.friendyName}}
input(type='checkbox' ng-change='submit(sysName.selected, options.sysBackend, sysName.id)' ng-model='sysName.selected' ng-checked='select.indexOf(sysName.id) != -1')
Angular
app.controller('sysInfo', sysInfo);
function sysInfo($scope, $rootScope, $http){
$scope.options = function(foo) {
var config = {params :{fooName: foo}}
$('#myModal').modal();
$http.get('/api/boo', config)
.then(function(resp) {
var selectArray = [];
$rootScope.select = [];
$rootScope.options = res.data.data[0];
$rootScopesysNames = resp.data.sysInfo;
$rootScope.sysLinks = resp.data.sysNamedLinks;
angular.forEach(resp.data.sysNamedLinks, function(value1, key1){
angular.forEach(resp.data.sysInfo, function(value0, key0){
if(value1.sysLinkId === value0.id){
selectArray.push(value0.id)
$rootScope.select = selectArray
}
})
})
})
}
res.data.data[0] = {id:1, sysBackend:'fumanchu'}
resp.data.sysInfo = [{id: 1, friendlyName:foo},{id: 2, friendlyName:fo},{id: 3, friendlyName:boo},]
resp.data.sysNamedLinks = [{sysLinkId:1},{sysLinkId:2},{sysLinkId:3}]
发生这种情况是因为 ng-model
和 ng-checked
之间存在一些冲突。
参考下面的例子,复选框被ng-checked
表达式初始化为checked
但是ng-model
值是false
.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app ng-init="test=false;checked=true;">
<input type="checkbox" ng-model="test" ng-checked="checked === true">
{{test}}
</div>
第二个例子,没有冲突,运行良好。
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app ng-init="test=true;checked=true;">
<input type="checkbox" ng-model="test" ng-checked="checked === true">
{{test}}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app ng-init="test=false;checked=true;">
<input type="checkbox" ng-model="test" ng-checked="checked === true">
{{test}}
</div>