Keep checkbox checked after page refresh AngularJS

Question

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.

For persistent data on angularJS you could use 3 ways: localStorage; implement a Angular service; Or hold on what you need on the $scope variable. Have you tried any of that? — Airton Barbosa
– Airton Barbosa, Commented Aug 24, 2016 at 15:31
I tried using the $scope variable technique posted here - stackoverflow.com/questions/24638375/… But it did not work for me. Do you have a sample for using localStorage or an Angular Service that will do the job? — User9902911
– User9902911, Commented Aug 24, 2016 at 15:33

Airton Barbosa · Accepted Answer · 2016-08-24 16:26:12Z

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;
}]);

Thanks for these inputs! I will try all of these and see which one works the best! Will reply back once I get it to work.

Jahongir Rahmonov · Accepted Answer · 2016-08-24 15:34:59Z

1

You need a way of saving those checked devices.

Try localStorage. Basically, when you select a device, add it to an array, like checkedDevices and add this array to localStorage like so:

localStorage.setItem("devices", JSON.stringify(checkedDevices));

then, at the beginning of your controller, get this array from the localStorage:

var devices = JSON.parse(localStorage.getItem("devices"));

then, check if it has items, if it does, set selectAll to false:

if (devices.length > 0){
    this.selectAll = false;
}else{
    this.selectAll = true;
}

then, for every device, check if it is in devices array, if it is, select it.

answered Aug 24, 2016 at 15:34

Jahongir Rahmonov

13.8k11 gold badges53 silver badges100 bronze badges

Collectives™ on Stack Overflow

Keep checkbox checked after page refresh AngularJS

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related