User9902911 User9902911 - 3 months ago 62
AngularJS Question

Keep checkbox checked after page refresh AngularJS

I'm quite new to AngularJS and had to takeover somebody else's project at work which has little to no documentation.

I have 2 kinds of check-boxes in my application, one is a "Select All" checkbox and another is a device selection checkbox. As the name suggests, the select all will select all the devices listed below it and if I uncheck the "select all" checkbox, I can check the devices individually to see them.

Here is the code of the Select all checkbox -

<input type="checkbox" data-ng-model='devCtrl.uiChoices.selectAll' value='true' data-ng-change="devCtrl.selectAll()"/><h4>Select / Deselect All</h4>


Controller:

_this.uiChoices.selectAll = true;


I can understand from above that by default, select all is checked and I can see all the devices below it checked too.

Moving onto the device check-box -

<input type="checkbox" data-ng-model='device.draw' data-ng-change="device = devCtrl.adjustVisibility(device)" />


Controller -

_this.adjustVisibility = function(draw) {
draw.marker.setVisible(draw.plot);
return draw;
}


Basically, whenvever the device is selected, it will appear on a google map. If it is unchecked, it won't appear on the map.

My question is, after I uncheck the "Select all" checkbox and then select only 2 devices in the list below and then do a page refresh, I want the select all to be disabled and show only those 2 devices to be checked and displayed on the map.

The list of devices is being pulled from a MySQL database and is updated dynamically.

Any help is appreciated.

Answer

As I said, you can do it by 3 different ways.

1 - Using $scope variable

In AngularJS you have a main Controller usually set at index.HTML body that you can access from all other controllers. You could use it to store your data on the $scope variable. See the example:

index.html:

<body ng-controller="DefaultController">

DefaultController.js:

angular.module('YourModule').controller('DefaultController', ['$scope', function ($scope) {
    //Storing Your data
    $scope.isChecked = true;
}]);

YourCheckBoxController.js

angular.module('YourModule').controller('YourCheckBoxController', ['$scope', function ($scope) {
    //Here you gonna access the $scope variable, that does not change on page reload
    $scope.accessingTheVariable= function () {
        if ($scope.isChecked) {
            //Select All
        }
        else {
            //Do not Select All
        }
    };

    $scope.onCheckBoxToggle {
        $scope.isChecked = _this.uiChoices.selectAll;
        //More code
    };
}]);

2- Using localStorage

//The property exists
if (localStorage.hasOwnProperty("isChecked")) {
    if(localStorage.isChecked) {
        //Select All
    }
    else {
        //Do not Select All
    }
}


//To set localStorage.isChecked
localStorage.setItem("isChecked", _this.uiChoices.selectAll);

3 - Angular Service (Factory)

On this scenario you should create a service that could be accessed from every Controller in your project (usefull if you gonna use the data on more than 1 Controller). Look:

YourService.js

angular.module('YouModule').factory('YouService', function () {
    var data =
    {
        IsChecked = true
    };

    data.buildIsChecked = function (isChecked) {
        this.IsChecked = isChecked;
    };

    return data;
});

YourIsCheckedController.js:

angular.module('YourModule').controller('YourCheckBoxController', 
    ['$scope', 'YouService', function ($scope, YouService) {

    //Setting the service
    //...
    YouService.buildIsChecked(_this.uiChoices.selectAll);

    //Accessing the service Information (it could be accessed from any Controller, just remember to set Service Name at begin of the module declaration)
    var isChecked = MenuService.IsChecked;
}]);