How to Hide Button permanently after one clicked in AngularJS

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="[email protected]" 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

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published