ng-show and ng-hide not binding to given variable in angularjs

1
votes

I am using ng-show and ng-hide to show the banner for my page. When I am logged in I wanna show different banner than for logged out. So I have two div with ng-show and ng-hide whose value I am changing in the controller to true and false.

Html code:

First banner:

<div id="firstPageHeader" class="navbar navbar-inverse" role="navigation" ng-show={{display}}>

Second banner:

<div id="restPageHeader" class="navbar-header" ng-hide={{display}}>

Controller:

var LoginController = function($scope){

$scope.display = true;
$scope.loginUser = function(credentials){
console.log(credentials.username);
$scope.display = false;
}

$scope.logout = function(){
console.log('logout');
$scope.display = true;
}

So here according to login and logout the display value will change to true and false but its not happening the value remains only true. So I want to know why the value is not getting changed even I used $scope.$apply()

3
angularjs

3 Answers

4
votes

ngShow and ngHide directives expect expressions. So it should be without curly braces {{ (which are used for expression interpolation):

ng-show="display"
0
votes

Can you explain how you are using loginUser() and logout() , coz in my case it is working fine..

My index.html is :

<!doctype html>
<html>
 <head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="switchcases"> <div ng-controller="LoginController">
<div ng-click="logout()">Hi</div>
<div ng-click="loginUser()">Bye</div>
<hr>
<div ng-show="display">Hi</div>
<div ng-hide="display">Bye</div>
</div>
</body>
</html>

and app.js is :

angular.module('switchcases',[])
.controller('LoginController',function($scope){
 $scope.display = true;
 $scope.loginUser = function(credentials){
//console.log(credentials.username);
 $scope.display = false;
 };
$scope.logout = function(){
//console.log('logout');
$scope.display = true;
 };
});

Cases :: When I click Hi(the one above <hr> tag) , only the 'Hi' below <hr> tag is displayed and when i click Bye(the one above <hr> tag),only the 'Bye' below <hr> tag is displayed , as expected .

The default value displayed will be 'Hi' below the <hr> tag.

Just check once that if you are using loginUser() inside the scope of the controller.

0
votes

You just need to replace braces in ng-hide and ng-show double quotes

<div id="restPageHeader" class="navbar-header" ng-hide="display">
        I am login 
        <img src="https://marketplace.canva.com/MABY09l0-Tw/1/0/thumbnail_large/canva-outlined-lettering-border-tumblr-banner-MABY09l0-Tw.jpg" alt="">
    </div>
    <div id="restPageHeader" class="navbar-header" ng-show="display">
        I am logout
        <img src="https://img.clipartfest.com/08e6b6a7495aca9bbc478fcf662cd29b_welcome-hanging-banner-welcome-banner-clipart_935-311.jpeg" alt="">
    </div>


this is controller 

$scope.display = true;
    $scope.loginUser = function () {
        console.log('loginUser');
        $scope.display = false;
    }
    $scope.logout = function () {
            console.log('logout');
            $scope.display = true;
        }