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.

回答1:

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

回答2:

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.

来源：https://stackoverflow.com/questions/39127400/keep-checkbox-checked-after-page-refresh-angularjs

标签

javascript

angularjs

checkbox