Question

我对AngularJS很陌生，不得不在工作中接管别人的项目，几乎没有文档。

我的应用程序中有两种复选框，一种是“全选”复选框，另一种是设备选择复选框。顾名思义，select all将选择它下面列出的所有设备，如果我取消选中“全选”复选框，我可以单独检查设备以查看它们。

以下是Select all复选框的代码 -

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

控制器：

_this.uiChoices.selectAll = true;

我可以从上面了解到，默认情况下，选中all all，我也可以看到它下面的所有设备。

转到设备复选框 -

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

控制器 -

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

基本上，当选择设备时，它将显示在谷歌地图上。如果未选中，它将不会显示在地图上。

我的问题是，在取消选中“全选”复选框，然后在下面的列表中仅选择2个设备，然后进行页面刷新，我希望禁用所有选项并仅显示要检查的2个设备并显示在地图上。

正在从MySQL数据库中提取设备列表并动态更新。

感谢任何帮助。

Answer 1

正如我所说，你可以通过3种不同的方式来做到这一点。

1 - 使用$ scope variable

在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 - 角度服务（工厂）

在这种情况下，您应该创建一个可以从项目中的每个Controller访问的服务（如果您要在多个Controller上使用数据，则非常有用）。看：

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

Answer 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数组中，如果是，请选择它。

在页面刷新AngularJS后保持复选框

2 个答案: