I have the below code and when i refresh the application the button is enabled state. I want the button to be in disabled state even after page refresh or logout from the application. Basically i need to save the state of the button. How can i do that?
//html
<div>
<input type="file" ng-disabled="false" id="id1">
</div>
//Controller
document.getElementById("id1").disabled = true;
You can use localStorage to save the state which is simple solution.
Store values for on page refresh and logout
localStorage.setItem('isPageRefreshed', 'true'); // page refresh
localStorage.setItem('isLoggedOut', 'true'); // on logout
Now you can add check for button disable, like this:
HTML:
<input type="file" ng-disabled="isDisabled" id="id1">
JavaScript/Controller:
if(localStorage.getItem('isPageRefreshed') === "true") {
$scope.isDisabled = true;
}
if(localStorage.getItem('isLoggedOut') === "true") {
$scope.isDisabled = true;
}
Anytime you want to enable the button then do this $scope.isDisabled = false;
The correct approach to use ng-disabled is to control it via controller.
<div>
<input type="file" ng-disabled="isUserLoggedIn" id="id1">
</div>
Controller
$scope.isUserLoggedIn = this.appService.isUserLoggedIn() || false;
//returns true or false based on if user is logged In
AppService
This can check localstorage as mentioned by VicJordan or whatever logic you wanted and implement.
