我已多次看过这个问题,但没有一次我看到了正常答案。
ng-hide和ng-show有什么区别?有吗?如果是的话什么时候使用其中一个(我明白了 - 如果,我只问这两个)。
我希望有人知道 谢谢。
答案 0 :(得分:3)
当需要反转表达式的结果时,ngShow指令根据提供给ngShow属性的表达式显示或隐藏给定的HTML元素。
通过删除或添加.ng-hide CSS类来显示或隐藏元素。 .ng-hide CSS类在AngularJS中预定义,并将显示样式设置为none(使用!important标志)。
ngHide只是语法糖。
基本上,使用ng-show="!testSomething()"
和ng-hide="testSomething()"
。
答案 1 :(得分:3)
所有directive
ng-hide
,ng-show
和ng-if
都采用boolean
形式的条件,并根据{{显示/隐藏视图1}}和true
。他们用来隐藏和显示视图的逻辑是不同的。
false
和ng-show
使用内部CSS,如下所示:
ng-hide
但是当我们使用ng-if-
如果condition为display: none; // according to show or hide
:将元素添加到DOM中。
如果condition为true
:从thr DOM中删除元素。
这意味着false
将元素保留在DOM中,并且观察者的成本保持不变,而用户不允许在DOM中查看元素。
如果你用ng替换ng-show
- 如果你可能在DOM中看到相当大的改进,因为那些额外的手表不在那里承担责任。
如果DOM中具有ng-show
的特定元素可能会对性能产生影响。
当您使用ng-if/ng-show/ng-hide
时,与ng-show / ng-hide相比,app会更快。但差异并不大。但是,如果您在动画中使用这些指令,则存在性能问题。
简而言之,如果您可以从DOM中删除元素,那么您应该使用ng - 否则您应该使用ng-show或ng-hide? strong>
答案 2 :(得分:1)
ng-show
允许您在表达式为true时显示元素的块:ng-hide
允许您在表达式为true时设置display:none
。他们正好相反。不要混淆。仅使用一个,ng-show
作为ng-show="exp"
和ng-show="!exp"
来显示或隐藏元素
答案 3 :(得分:0)
我们知道angularjs是一种双向数据绑定。 ng-hide和ng-show是我们用于两个不同目的的一个用于隐藏,另一个用于显示。例如,如果您使用一个返回true或false的方法。在任何情况下隐藏你想要显示的一个元素,然后你只需要使用一个方法来隐藏和显示。