Issue
I want to hide start course button permanently after one click. and I refresh my brower, then show me only resume button.
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.17/angular.js" data-semver="1.3.17"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<button class="btn btn-primary" ng-click="showDiv=true" ng-show="!showDiv">Start Course</button>
<button class="btn btn-success" ng-show="showDiv">Resume</button>
</body>
</html>
controller
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
this is my plunker link
Solution
Check plunker: Plunker link
You would use something like this:
JS:
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.showDiv = false;
$scope.getItem = function(){
var stored = localStorage.getItem("showDiv");
if(stored)
$scope.showDiv = JSON.parse(stored)
}
$scope.saveItem = function(){
localStorage.setItem("showDiv", true)
}
$scope.getItem();
});
And HTML:
<button class="btn btn-primary" ng-click="showDiv=true; saveItem();" ng-show="!showDiv">Start Course</button>
Answered By - Anurag Srivastava
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.