CODEWITHSUNDEEP
angularjs
patriques
patriques

Reputation: 5201

Make a navbar hide with ng-hide/ng-show

I can´t this navbar to show just one of the navbars, it shows both of them. What am I doing wrong?

View: 

    <!-- Logged in -->
    <div ng-show="loggedIn">
      Navbar logged in
    </div>

    <!-- Logged out-->
    <div ng-hide="!loggedIn">
      Navbar logged out
    </div>

  </div>
</nav>

Controller:

.controller('mainCtrl', ['$scope', '$state', 'userService',
  function($scope, $state, userService) {

    $scope.loggedIn = userService.isLoggedIn();

    $scope.login = function() {
      userService.login();
      $state.go('home');
    };

    $scope.logout = function() {
      userService.logout();
      $state.go('login');
    };

  }
]);

Upvotes: 0

Views: 2480

Answers (3)

Denis C de Azevedo
Denis C de Azevedo

Reputation: 6298

If you want to fix this with better performance, you don't need to keep the hidden navbar in the DOM, you can use:

<!-- Logged in -->
<div ng-if="loggedIn">
  Navbar logged in
</div>

<!-- Logged out-->
<div ng-if="!loggedIn">
  Navbar logged out
</div>

Upvotes: 1

Nikhil Aggarwal
Nikhil Aggarwal

Reputation: 28455

You need to update the condition

<div ng-hide="!loggedIn">

to 

<div ng-show="!loggedIn">

Upvotes: 1

Facundo Pedrazzini
Facundo Pedrazzini

Reputation: 1486

Remove the "!" of the ng-hide:

<!-- Logged out-->
<div ng-hide="loggedIn">
  Navbar logged out
</div>

Upvotes: 2

Related Questions