刷新页面后保持选中复选框AngularJS [英] Keep checkbox checked after page refresh AngularJS
问题描述
我是AngularJS的新手，在工作中不得不接管几乎没有文档的其他人的项目。
I'm quite new to AngularJS and had to takeover somebody else's project at work which has little to no documentation.
我有2种复选框在我的应用程序中，一个是全选复选框，另一个是设备选择复选框。顾名思义，全选将选择其下面列出的所有设备，如果我取消选中全选复选框，则可以逐个检查设备以查看它们。
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>
控制器：
_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.
移动到设备复选框-
<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;
}
基本上，无论何时选择该设备，它都会出现在Google地图上。如果未选中，它将不会出现在地图上。
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.
设备已从MySQL数据库中提取并动态更新。
The list of devices is being pulled from a MySQL database and is updated dynamically.
我们将提供任何帮助。
推荐答案
正如我所说，您可以通过3种不同的方式来实现。
As I said, you can do it by 3 different ways.
1-使用$ scope变量
在AngularJS中，通常有一个主控制器设置在index.HTML正文中，您可以从所有其他控制器访问它。您可以使用它将数据存储在$ scope变量上。参见示例：
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-使用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（工厂）
在这种情况下，您应该创建一个可以从项目中的每个Controller进行访问的服务（如果要在多个Controller上使用数据，则可以使用该服务）。看起来：
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;
}]);
这篇关于刷新页面后保持选中复选框AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
