kittu kittu - 5 months ago 34
AngularJS Question

unable to hide logout button after signout using ng-show in angularjs

I have the logout button like this:

<li class="dropdown" data-ng-if="userName">
<a href class="dropdown-toggle clear" data-toggle="dropdown" data-ng-show="userName">
</a>
<!-- dropdown -->
<ul class="dropdown-menu>
<li ng-hide="fb_id">
<a ui-sref="app.changePassword">Change Password</a>
</li>
<li>
<a ui-sref="app.changeProfilePic">Change Profile Picture</a>
</li>
<li data-ng-show="userName">
<a ui-sref="access.signout" data-ng-if="userName">Logout</a>
</li>
</ul>
<!-- / dropdown -->
</li>


And in the controller:

$scope.logIn = function (user) {
$scope.myPromise = AuthService.login({
'uid': user.email,
'password': user.password,
}).then(function (response) {
$localStorage.userName = response.userName;
$scope.userName = $localStorage.userName;
}, function (error) {
$scope.authError = true;
});
};


Sign out controller:

$scope.userName = "";
delete $localStorage.userName;
$rootScope.userName = "";


Doesn't matter I use
ng-if
or
ng-show
it is still showing the logout button and the dropdown.

Answer

Try with the below code.

<a ui-sref="access.signout" data-ng-if="userName != ''">Logout</a>