Angularjs基于存储在会话存储中并存储在$scope上的变量动态显示/隐藏元素

Angularjs dynamically show / hide an element based on a variable stored in session storage and stored on $scope

本文关键字：存储 scope 变量 隐藏 动态显示 元素 于存储 Angularjs 会话      更新时间：2023-09-26

我已经搜索了很多，但找不到一个在不刷新页面的情况下显示/隐藏元素的解决方案。这是我试图实现的一个简化版本：

HTML:

<input ng-show="user == null" type="text" placeholder="username" ng-model="username" />
<button ng-show="user == null" ng-click="login()">Add User</button>
<div ng-show="user != null"> should show when user is defined </div>

控制器：

 $scope.login = function () {
   sessionStorage.setItem('username', $scope.username);
   $scope.user = sessionStorage.getItem('username');
 };

我能够成功地将用户名存储在会话存储中，但在变量存储在sessionStorage和$scope.user.中后，我无法使输入消失，也无法使div动态显示

如果我在登录后刷新页面，显示和隐藏会起作用。

另一种方法是在登录函数中显示/隐藏元素，但我也不知道如何做到这一点。

有没有办法让它们动态显示/隐藏？

提供的代码没有任何问题。这里有一个非常有效的例子，我唯一删除的是对sessionStorage的访问，因为出于安全原因，它不允许在沙箱模式下使用。

确保已分别声明ng-app和ng-controller指令

var app = angular.module("myApp", []);
app.controller("myController", ["$scope",
  function($scope) {
    $scope.login = function() {
      $scope.user = $scope.username;
    };
  }
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
  <input ng-show="user == null" type="text" placeholder="username" ng-model="username" />
  <button ng-show="user == null" ng-click="login()">Add User</button>
  <div ng-show="user != null">should show when user is defined</div>
</div>

相关文章：