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

我对AngularJS来说很新，不得不接管别人的项目，而这个项目几乎没有任何文档。在页面刷新后保持复选框被选中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; 
    }

基本上，whenvever被选择的装置中，它会出现一个谷歌地图上。如果未选中，则不会显示在地图上。

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

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

任何帮助表示赞赏。

来源

2016-08-24 User9902911

有关angularJS持久性数据，你可以使用3种方式：localStorage的;实施Angular服务;或者坚持你在$ scope变量上需要的东西。你有没有尝试过吗？ –

我尝试使用$ scope变量技术发布在这里 - http://stackoverflow.com/questions/24638375/keep-checkbox-checked-after-navigating-away-from-page但它没有为我工作。你有使用localStorage或Angular Service来做这项工作的例子吗？ – User9902911

将其作为答案发布。希望能帮助到你！ –

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

1 - 使用$范围变量

在你有一个主控制器通常设置在机身的index.html，你可以与其他控制器访问AngularJS。您可以使用它将数据存储在$ 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 - 角服务（厂）

在这种情况下，你应该创建一个可以从每一个控制器在你的项目中访问的服务（有用的，如果你要使用多于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; 
}]);

来源

2016-08-24 16:26:12

感谢您的投入！我会尝试所有这些，看看哪一个最好！一旦我开始工作，会回复。 – User9902911

您需要一种方法来保存这些检查过的设备。

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

来源

2016-08-24 15:34:59

回答

相关问题