使用 ng-if 而不是 ng-show 时复选框值不会更改

Checkbox value not changing when use ng-if instead ng-show

提问人:Muhamad Fauzan 提问时间:11/15/2023 最后编辑:Muhamad Fauzan 更新时间:11/15/2023 访问量:41

问:

我正在制作一个复选框,该复选框仅适用于具有专业模式的用户。我使用“ng-if”条件仅对专业用户显示复选框。

查看.htm

<li ng-if="pro">
    <input type="checkbox" name="tall" id="tall6" class="accordion-check-box">
    <label for="tall6">
        <div ng-class="{ 'ball-general' : showLogo ,'ball-red': !logo}" data-id="&#xf058"></div>
        <span class="label-name">Show Logo&nbsp;</span>

        <input type="checkbox" value="'true'" ng-model="showLogo" ng-click="saveSettings()" />
    </label>
</li>

控制器.js

$scope.showLogo = true;
$scope.pro= false;

$scope.getData = function() {
    $http().success(function(data, status, $headers, config) {
        $scope.showLogo = data.showLogo;
        $scope.pro = data.pro;
    });
}

$scope.saveSettings = function() {
    if (!$scope.loading) {
        $scope.loading = true;

        $http({
            method: 'POST', 
            url: 'url', 
            data: {
                showLogo: $scope.showLogo
            }
        }).then(
            function successCallback(response) {
                var data = response.data;
                $scope.showLogo = data.showLogo;
                $scope.loading = false;
            },
            function errorCallback(response) {
                console.error(response);
                $scope.loading = false;
            }
        );
    }
};

事实证明,即使触发了“saveSettings()”函数,复选框值也不会更改。

我尝试使用“ng-show”代替,就像这样

<li ng-show="pro">
    <input type="checkbox" name="tall" id="tall6" class="accordion-check-box">
    <label for="tall6">
        <div ng-class="{ 'ball-general' : showLogo ,'ball-red': !showLogo}" data-id="&#xf058"></div>
        <span class="label-name">Show Logo&nbsp;</span>

        <input type="checkbox" value="'true'" ng-model="showLogo" ng-click="saveSettings()" />
    </label>
</li>

它工作正常,我想知道是什么导致了这个问题

Javascript AngularJS 的

评论

0赞 Will Huang 11/15/2023
您是否意识到这两个 HTML 模板在复选框上是不同的?第一个用,第二个用。这可能是问题的根本原因。ng-model="logo"ng-model="showLogo"
0赞 Muhamad Fauzan 11/15/2023
@Will黄,哦,我的错误。那里有一个错别字。在实际代码中,现在很好,因为我已经进行了编辑

答:

0赞 Chintan Dhokai 11/15/2023 #1

若要解决使用 时的问题,应先将模型初始化为默认值,然后再在复选框中使用该模型。ng-if(logo or showLogo)

<li ng-if="pro">
    <input type="checkbox" name="tall" id="tall6" class="accordion-check-box">

    <label for="tall6">
        <div ng-class="{ 'ball-general' : showLogo ,'ball-red': !showLogo}" data-id="&#xf058"></div>
        <span class="label-name">Show Logo&nbsp;</span>
        <input type="checkbox" value="'true'" ng-model="logo" ng-click="saveSettings()" />
    </label>
</li>

在控制器中,您可以为 logo 设置默认值:

$scope.showLogo = true;
$scope.pro = false;
$scope.logo = true; // Set a default value