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

Question

我有一个选择下拉列表。选择下拉列表中的每个值后，将使用 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"}

Answer 1

如果您查看 ng-checked 和 ng-model 的定义，您不应该同时使用它们。理想情况下你应该只使用 ng-model。 ng-model="flat.isChecked" 。如果您添加一些日志语句，您将更多地了解正在触发或未触发的内容。

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

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

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