Angularjs根據存儲在會話存儲中的變量動態地顯示/隱藏元素，並存儲在$ scope中

Question

我一直在尋找很多東西，並且無法找到解決方案，它會在不刷新頁面的情況下顯示/隱藏元素。這是什麼，我試圖完成一個簡化版本：

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動態顯示。

的顯示和隱藏做工作，如果我刷新頁面，登錄後

另一種方法是顯示/隱藏在登錄功能的元素，但我無法弄清楚如何做，要麼。

有沒有辦法讓這些動態顯示/隱藏？

Answer 1

提供的代碼沒有任何問題。這是一個完美的例子，我刪除的唯一東西是對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>