All geek questions in one place

Check the box after refreshing the page. Angularjs

I am new to AngularJS and had to capture someone else's project at work, which has virtually no documentation.

I have two types of flags in my application, one is the Select All checkbox, and the other is the device selection checkbox. As the name implies, select all, select all of the devices listed below, and if I clear the "select all" checkbox, I can check them separately for viewing.

Here is the code for 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 everything is selected by default, and I see that all devices under it are also checked.

Move to device -

<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, when you select a device, it will appear on the google map. If it is not installed, it will not be displayed on the map.

, " " , , , 2 , .

MySQL .

.

+4
2

, .

1 - $scope

AngularJS , index.HTML, . $scope. . :

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- 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 (Factory)

, (, 1 ). :

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

.

localStorage. , , , checkedDevices, localStorage :

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

localStorage:

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

, , , selectAll false:

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

, devices, , .

+1

Source: https://habr.com/ru/post/1652361/

More articles:


All Articles