使用ng-if/ng-show/ng-switch的Angular条件显示会简要地显示这两个元素

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

本文关键字：显示 元素 两个 ng-switch ng-show ng-if Angular 使用 条件      更新时间：2023-09-26

我想根据布尔值显示元素A或元素B，但是当值转换时，使用ng-if:

简短地显示两个元素
<div ng-if="a"></div>
<div ng-if="!a"></div>

当我使用ng-show/ng-hide:

时也会发生这种情况
<div ng-show="a"></div>
<div ng-hide="a"></div>

甚至ng-switch:

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

是否有办法强制在同一时间只显示其中一个元素，或者这是不可能的?

(像我这样迟到的人迟到的答案)

我猜这个项目使用了ngAnimate，导致了这些问题。

这个问题有几个答案，从删除ngAnimate，改变相关的CSS和切换到使用ngClass。

另一个问题有一个答案，建议使用$animateProvider配置动画

改变为

<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>

检查这个提琴

相关文章：