ng-change没有在复选框上被调用 [英] ng-change not getting called on checkbox
问题描述
我有一个选择下拉列表。在下拉列表中选择每个值后，将使用ng-repeat创建复选框。当使用复选框中的 ng-change 选中复选框时，应该选择下拉列表中的所有值，并将相应的复选框存储在数组中。
I have a select dropdown. Upon selecting each value in dropdown, checkboxes are created using ng-repeat. All the values in the dropdown are supposed to be selected and corresponding checkboxes are stored in an array when a checkbox is checked using ng-change on the checkbox.
当我改回到上一个下拉值时，我正在检查用于存储检查值的数组中是否已经存在复选框，然后使用 ng-在加载时检查。
When I change back to a previous dropdown value, I am checking if the checkboxes are already there in the array used to store checked values and then check them using ng-check on load.
但是当我取消选中已加载的复选框时，有时不会调用ng-change。我不明白为什么。
But when I uncheck the loaded checkboxes, SOMETIMES the ng-change is not called. I don't understand why.
当我再次选中并取消选中它时，它就可以工作。
存储并删除复选框更改时的选中值：
Storing and removing checked values on checkbox change:
$scope.checkChanged = function(isChecked, flat){
//debugger;
console.log("check change");
if(isChecked != -1){
let tempArray = [];
for(let i=0; i<$scope.userEventData.selectedFlats.length; i++){
tempArray.push($scope.userEventData.selectedFlats[i].flat_id);
}
if(!tempArray.includes(flat.flat_id)){
$scope.userEventData.selectedFlats.push(flat);
console.log("pushed new", flat.flat_no);
}
}else{
$scope.userEventData.selectedFlats = $scope.userEventData.selectedFlats.filter(function(f){
console.log(f, flat.flat_id);
return f.flat_id != flat.flat_id
});
console.log("removed", flat.flat_no);
}
console.log($scope.userEventData.selectedFlats, "pushed check");
}
$ scope.flatsArray 是用于使用 ng-repeat 生成复选框的数组。
根据存储检查值的数组将复选框设置为选中还是未选中（$ scope.userEventData.selectedFlats）：
$scope.flatsArray is the array used to generate checkboxes using ng-repeat.
Set checkbox to checked or unchecked based on array storing checked values($scope.userEventData.selectedFlats):
.then(function successCallback(response){
$scope.flatsArray = response.data.body.Data;
for(let d=0; d< $scope.flatsArray.length; d++){
$scope.flatsArray[d].isChecked = false;
}
if($scope.userEventData.selectedFlats.length){
let tempSelectedFlat = [];
for(let j=0; j<$scope.userEventData.selectedFlats.length; j++){
tempSelectedFlat.push($scope.userEventData.selectedFlats[j].flat_id);
}
console.log(tempSelectedFlat,"tempSelectedFlat");
/** If present in selectedFlats set ng-checked to true **/
for(let d=0; d< $scope.flatsArray.length; d++){
console.log(d, "d");
console.log($scope.flatsArray[d].flat_id, "$scope.flatsArray[d].flat_id");
console.log(tempSelectedFlat.includes($scope.flatsArray[d].flat_id));
if(tempSelectedFlat.includes($scope.flatsArray[d].flat_id)){
$scope.flatsArray[d].isChecked = true;
}else{
$scope.flatsArray[d].isChecked = false;
}
}
}else{
for(let d=0; d< $scope.flatsArray.length; d++){
$scope.flatsArray[d].isChecked = false;
}
}
html：
<div class="ScrollStyle">
<div ng-repeat="flat in flatsArray" class="row" style="width:90%;">
<div class="col-md-2">
<input class="" name="{{flat.flat_no}}"
type="checkbox" ng-true-value="{{flat.flat_id}}"
ng-false-value="'-1'"
ng-checked="flat.isChecked"
ng-change="checkChanged(sFlats[$index], flat)" ng-model="sFlats[$index]" />
</div>
<div class="col-md-10"><label for="{{flat.flat_no}}">{{flat.flat_no}}</label></div>
</div>
</div>
$ scope.flatsArray ：
0: {flat_id: "9", flat_no: "1", isChecked: false, $$hashKey: "object:62"}
1
:
{flat_id: "10", flat_no: "2", isChecked: false, $$hashKey: "object:63"}
推荐答案
如果您查看ng-checked和ng-model的定义，就不会两者都用。理想情况下，您应该只使用ng-model。 ng-model = flat.isChecked 。如果添加一些日志语句，您将进一步了解是否触发了什么。
If you look at the definition of ng-checked and ng-model, you are not suppose to use them both. Ideally you should just use ng-model. ng-model="flat.isChecked" . If you add some log statements you will know a bit more as to what is being fired or not.
以下是您可能会喜欢的一些信息： Angularjs：复选框和ng-change
Here is some information you may enjoy: Angularjs: checkbox and ng-change
ng-checked会修改checked属性，但是如果要绑定，ng-model会是最好的。我几乎在所有形式中都只使用 ng-model 。
ng-checked will modify the checked attribute, but if you want binding, ng-model will be the best. I almost exclusively use ng-model in all of my forms.
日志将为您提供更多洞察力，以了解实际触发的事件。如果未触发某些事件，则表示事件未正确连接。
The Logs will give you more insight to know what is actually being fired. If something is not being fired, then it means the event is not wired correctly.
这篇关于ng-change没有在复选框上被调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
