提问人:Muhamad Fauzan 提问时间:11/15/2023 最后编辑:Muhamad Fauzan 更新时间:11/15/2023 访问量:41
使用 ng-if 而不是 ng-show 时复选框值不会更改
Checkbox value not changing when use ng-if instead ng-show
问:
我正在制作一个复选框,该复选框仅适用于具有专业模式的用户。我使用“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=""></div>
<span class="label-name">Show Logo </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=""></div>
<span class="label-name">Show Logo </span>
<input type="checkbox" value="'true'" ng-model="showLogo" ng-click="saveSettings()" />
</label>
</li>
它工作正常,我想知道是什么导致了这个问题
答:
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=""></div>
<span class="label-name">Show Logo </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
评论
ng-model="logo"
ng-model="showLogo"