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

Question

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');
    };

  }
]);

Facundo Pedrazzini · Accepted Answer · 2015-06-09 17:05:48Z

2

Remove the "!" of the ng-hide:

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

answered Jun 9, 2015 at 17:05

Facundo Pedrazzini

1,48614 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nikhil Aggarwal · Accepted Answer · 2015-06-09 17:06:08Z

1

You need to update the condition

<div ng-hide="!loggedIn">

to

<div ng-show="!loggedIn">

answered Jun 9, 2015 at 17:06

Nikhil Aggarwal

28.5k4 gold badges46 silver badges61 bronze badges

Comments

Denis C de Azevedo · Accepted Answer · 2015-06-09 17:07:57Z

1

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>

answered Jun 9, 2015 at 17:07

Denis C de Azevedo

6,3072 gold badges34 silver badges49 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related