页面刷新AngularJS后保持复选框选中答案

【问题标题】：Keep checkbox checked after page refresh AngularJS页面刷新AngularJS后保持复选框选中
【发布时间】：2016-08-24 15:27:39
【问题描述】：

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

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

这里是全选复选框的代码 -

<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;

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

移动到设备复选框 -

<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 数据库中提取并动态更新。

感谢任何帮助。

【问题讨论】：

对于 angularJS 上的持久数据，您可以使用 3 种方式：localStorage；实现一个 Angular 服务；或者在 $scope 变量上保留你需要的东西。你试过吗？
我尝试使用此处发布的 $scope 变量技术 - stackoverflow.com/questions/24638375/… 但它对我不起作用。你有使用 localStorage 或 Angular 服务的示例吗？
将其作为答案发布。希望对您有所帮助！

标签： javascript angularjs checkbox

【解决方案1】：

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

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- 使用本地存储

//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 服务（工厂）

在这种情况下，您应该创建一个可以从项目中的每个 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;
}]);

【讨论】：

感谢您的意见！我会尝试所有这些，看看哪一个效果最好！一旦我开始工作就会回复。

【解决方案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数组中，如果是，则选择它。

【讨论】：