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属性，但是如果要绑定，最好使用ng-model。我几乎在所有形式中都只使用 ng-model 。

日志将为您提供更多洞察力，以了解实际被触发的内容。如果未触发某些事件，则表示事件未正确接线。

ng-change没有被调用复选框

1 个答案: