Angular conditional display using ng-if/ng-show/ng-switch briefly shows both elements

Question

I want to show either element A or B based on the value of a boolean, but when the value switches, both elements are shown briefly, using ng-if:

<div ng-if="a"></div>
<div ng-if="!a"></div>

This also happens when I use ng-show/ng-hide:

<div ng-show="a"></div>
<div ng-hide="a"></div>

And even ng-switch:

<div ng-switch="a || 'false'">
   <div ng-switch-default></div>
   <div ng-switch-when="false"></div>
</div>

Is there any way to enforce only one of those elements being shown at the same time, or it this just not possible?

When I create an isolated example, everything works fine, but only in the context of my application it breaks down. — dndr, Oct 21 '15 at 16:09

score 1 · Answer 1 · answered Mar 16 '21 at 13:59

(Late answer for late people like me.)

I'm guessing the project uses ngAnimate that causes these kinds of issues.

This question has several answers, ranging from removing ngAnimate, changing related CSS and switching to using ngClass.

Another question has an answer suggesting to configure animations with $animateProvider.

score 0 · Answer 2 · answered Oct 21 '15 at 16:31

0

Change to

<div ng-show="a == true">A</div>
<div ng-show="a == false">B</div>


<div ng-switch="a || 'false'">
   <div ng-switch-default>A</div>
   <div ng-switch-when="false">B</div>
</div>

<button ng-click="a = !a">Switch {{a}}</button>

Check this fiddle

answered Oct 21 '15 at 16:31

Ali Adravi

21,707
9
87
85

This works fine, but in my application there seems to be latency – dndr Oct 22 '15 at 10:35

Angular conditional display using ng-if/ng-show/ng-switch briefly shows both elements

2 Answers2

Linked