gpt4 book ai didi

javascript - ng-change 没有在复选框上被调用

转载 作者:行者123 更新时间:2023-12-03 01:39:28 25 4
gpt4 key购买 nike

我有一个选择下拉列表。选择下拉列表中的每个值后,将使用 ng-repeat 创建复选框。当在复选框上使用 ng-change 选中复选框时,下拉列表中的所有值都应该被选中,并且相应的复选框将存储在数组中。

当我改回之前的下拉值时,我会检查用于存储选中值的数组中是否已存在复选框,然后在加载时使用 ng-check 检查它们。

但是当我取消选中加载的复选框时,有时不会调用 ng-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):

.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" 。如果您添加一些日志语句,您将更多地了解正在触发或未触发的内容。

以下是您可能会喜欢的一些信息:Angularjs: checkbox and ng-change

ng-checked会修改checked属性,但如果你想要绑定(bind),ng-model将是最好的。我几乎在所有表单中都使用 ng-model

日志将使您更深入地了解实际被解雇的内容。如果某些内容没有被触发,则意味着事件未正确连接。

关于javascript - ng-change 没有在复选框上被调用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50921448/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com