I work with AngularJS in an Ionic & Cordova Environment. I've a Checkbox in Toggle-Style - with that Checkbox the User can activate or deactivate an Option which will be saved in a Database via XHR-Request.
Case 1: Checkbox is activated. I click on it - the toggle switched to false, but the value stays still on true. I must click on it twice more (toggle back to true and then to false again) > now the Value changes to false.
Case 2: Checkbox is deactivated. I click on it - the toggle switched to true, the value switches to true, everything's fine. Even if I switch back to false, it works directly.
So: Why must my Checkbox be checked to true, before I can check the value back to false?!
HTML/VIEW:
<input type="checkbox" ng-model="setTrackOption110" ng-checked="isChecked110()" ng-change="stateChanged110(setTrackOption110)" />
CONTROLLER, Part 1 - Check State from DB (works without any issue):
$http({
method: 'GET',
url: 'http://***&do=get&optid=110&userId=' + fdappAuth.fdappUserId + '&userPwHash=' + fdappAuth.fdappUserPw,
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
}
})
.success(function (data, status) {
// Verarbeitet die Daten und setzt diese zur Anzeige in die scopes
console.log("Optionsabfrage für Option 110 läuft");
$scope.optentry = data[0];
console.log("Rueckgabe JSON:");
console.log($scope.optentry);
$scope.optentry.opt_110 = data[0].opt_110;
console.log("Optionswert:");
console.log($scope.optentry.opt_110);
if ($scope.optentry.opt_110 == 1) {
$scope.isChecked110 = function () {
// return true or false
return true;
};
} else {
$scope.isChecked110 = function () {
// return true or false
return false;
};
}
});
CONTROLLER, Part 2 - Safe the new Value (here's the problem):
// START OPTION 110 - TRACK & SHARE
// Liest aus, ob der Wert geändert wird - wenn ja, wird die jeweilige Aktion ausgeführt
$scope.stateChanged110 = function (checked) {
console.log("STATUSÄNDERUNG || Neuer Status: checked: " + checked);
if (checked == true) {
// Start XHR Request
$http({
method: 'GET',
url: 'http://*&do=set&optid=110&state=true&userId=' + fdappAuth.fdappUserId + '&userPwHash=' + fdappAuth.fdappUserPw,
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
}
})
.success(function (data, status) {
console.log("api call options erfolgreich");
});
}
if (checked == false) {
// Start XHR Request
$http({
method: 'GET',
url: 'http://*&do=set&optid=110&state=false&userId=' + fdappAuth.fdappUserId + '&userPwHash=' + fdappAuth.fdappUserPw,
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
}
})
.success(function (data, status) {
console.log("api call options erfolgreich");
});
}
};
I even have test anguar.isDefined/isUndefined, or use ng-click instead of ng-change and some other small workarounds without solving. Thanks for your help.