Search code examples
javascriptangularjsangular-ng-if

Is it possible to make ng-if behave like ng-show/ng-hide using the same variable?

I've got a basic question which I can't find an answer to by looking at the Angular documentation or Google, so I'm assuming that this is not possible but I would like to know for sure.

Basically what I want is to use a variable, for example $scope.loggedIn, like this:

<div ng-if="loggedIn">Hide me when I'm logged in</div>
<div ng-if="loggedIn">Show me when I'm logged in</div>

So when this is true I want one div to show, and the other one to hide. I know this is possible when using ng-show and ng-hide but that doesn't remove them from the DOM which I would like in my own scenario.

One way to achieve this would be to use two separate variables of course but is there a better way?

Solution

  • Sure, you can negate the variable with a !:

    <div ng-if="!loggedIn">Hide me when I'm logged in</div>
<div ng-if="loggedIn">Show me when I'm logged in</div>