Angular ng-hide或ng-show?为什么?

时间:2017-01-23 08:44:04

标签: javascript html angularjs ng-show ng-hide

我已多次看过这个问题,但没有一次我看到了正常答案。

ng-hide和ng-show有什么区别?有吗?如果是的话什么时候使用其中一个(我明白了 - 如果,我只问这两个)。

我希望有人知道 谢谢。

4 个答案:

答案 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-hideng-showng-if都采用boolean形式的条件,并根据{{显示/隐藏视图1}}和true。他们用来隐藏和显示视图的逻辑是不同的。

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

答案 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的方法。在任何情况下隐藏你想要显示的一个元素,然后你只需要使用一个方法来隐藏和显示。