Angular ng-隐藏还是 ng-显示？为什么？

Question

这个问题我已经看过很多次了，但是没有一次看到过正常的答案。

ng-hide 和 ng-show 有什么区别？有吗？如果是的话什么时候使用其中之一（我理解 ng-if，我只问这两个）。

希望有人知道谢谢。

Answer 1

ng-show

允许您在表达式为真时创建元素的 display:block，而 ng-hide 允许您在表达式为真时设置 display:none。它们正好相反。不要混淆。只使用一个，ng-show as ng-show="exp" 和 ng-show="!exp" 来显示或隐藏一个元素

Answer 2

我们知道 angularjs 是双向数据绑定。 ng-hide 和 ng-show 是我们用于两个不同的目的，一个用于隐藏，另一个用于显示。例如，如果您使用一种方法 returns true 或 false。在任何情况下隐藏一个你想显示的元素然后你只需要使用一种方法来隐藏和显示。

Answer 3

The ngShow directive shows or hides the given HTML element based on the expression provided to the ngShow attribute.

The element is shown or hidden by removing or adding the .ng-hide CSS class onto the element. The .ng-hide CSS class is predefined in AngularJS and sets the display style to none (using an !important flag).

当您需要反转表达式的结果时，

ngHide 只是语法糖。

基本上，使用ng-show="!testSomething()"和ng-hide="testSomething()"是一样的。

Answer 4

所有这些 directive 像 ng-hide 、 ng-show 和 ng-if 都采用 boolean 和 show/hide 形式的条件根据 true 和 false 的观点。它们用于隐藏和显示视图的逻辑不同。

ng-show 和 ng-hide 在内部使用 CSS 像这样：

display: none; // according to show or hide

但是当我们使用ng-if- 如果条件是 true：将元素添加到 DOM。如果条件是 false：从 DOM.

中删除元素

表示ng-show保留DOM中的元素，观察者的成本保持不变，而不允许用户看到DOM中的元素。如果将 ng-show 替换为 ng-if，您可能会看到 DOM 有相当大的改进，因为那些额外的手表不在那里承担责任。

如果特定元素在 DOM 中有 ng-if/ng-show/ng-hide，那么它可能会对性能产生影响。当您使用 ng-if 时，应用程序会比 ng-show/ng-hide 更快。但差异并不明显。但是，如果您在动画中使用这些指令，则可能会出现性能问题。

简而言之，如果你可以从DOM中删除一个元素，那么你应该使用ng-if，否则你应该使用ng-show或ng-hide ].

Angular ng-隐藏还是 ng-显示？为什么？

Angular ng-hide or ng-show ? why?

html

javascript

angularjs

ng-show

ng-hide