1
votes

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.

2
Thank you, it works! :) - GER_det

2 Answers

1
votes

try initializing $scope.setTrackOption110 = false, mostly its the dot/scope problem

0
votes

Based on entry's answer:

I've added the posted line in my isChecked Function:

if ($scope.optentry.opt_110 == 1) {
                    $scope.isChecked110 = function () {
                        // return true or false
                        $scope.setTrackOption110 = true;
                        return true;
                    };
                } else {
                    $scope.isChecked110 = function () {
                        // return true or false
                        $scope.setTrackOption110 = false;
                        return false;
                    };
                }