Question

我想一键后永久隐藏“开始课程”按钮。，然后刷新浏览器，然后仅显示“恢复”按钮。

<!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>

控制器

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';



});

这是我的plunker link

Answer 1

检查竖笛：Plunker link

您将使用以下内容：

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();

});

和HTML：

<button class="btn btn-primary" ng-click="showDiv=true; saveItem();" ng-show="!showDiv">Start Course</button>

Answer 2

您必须使用localStorage使用以下步骤。

1。在您的应用中安装ngStorage

npm i ng-storage

2。在您的模块中

angular.module('app', [
    'ngStorage'
])

3。注入您的控制器

app.controller('MainCtrl', function ($scope, $localStorage) {
    $scope.name = 'World';
    if ($localStorage.showDiv == true) {
        $scope.showDiv = true;
    }else{
        $scope.showDiv = false;
    }
    $scope.hideStart = function(){
       $scope.showDiv = true;
       $localStorage.showDiv = true;
    }
});

4.in html

<button class="btn btn-primary" ng-click="hideStart()" ng-if="!showDiv">Start Course</button>

单击AngularJS后如何永久隐藏按钮

2 个答案: