角ng-hide或ng-show？ 為什么？

Question

我已經多次看到這個問題，但是沒有一次看到正常的答案。

ng-hide和ng-show有什么區別？ 有一個嗎？ 如果是這樣，什么時候使用其中一個（我理解ng-if，我只問這兩個問題）。

我希望有人知道謝謝。

Answer 1

ngShow指令根據提供給ngShow屬性的表達式顯示或隱藏給定的HTML元素。

通過刪除.ng-hide CSS類到該元素上，可以顯示或隱藏該元素。 .ng-hide CSS類是在AngularJS中預定義的，並將顯示樣式設置為none（使用！important標志）。

當需要反轉表達式的結果時， ngHide只是語法糖。

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

Answer 2

所有這些directive ng-hide ， ng-show和ng-if采用boolean形式的條件，並根據true和false從視圖中顯示/隱藏。 他們用來隱藏和顯示視圖的邏輯是不同的。

ng-show和ng-hide內部使用CSS，如下所示：

display: none; // according to show or hide

但是當我們使用ng-if- if條件為true ：將元素添加到DOM中。 如果condition為false ：從DOM中刪除元素。

這意味着ng-show可以使DOM中的元素保持不變，並且觀察者的成本保持不變，而用戶則不允許查看DOM中的元素。 而且，如果用ng-show if替換ng-show ，則可能會見證DOM的顯着改進，因為這些多余的手表不負責任。

如果特定元素在DOM中具有ng-if/ng-show/ng-hide ，則可能會對性能產生影響。 當您使用ng-if ，與ng-show / ng-hide相比，該應用程序會更快。 但是區別並不明顯。 但是，如果您在動畫中使用這些指令，則可能會出現性能問題。

簡而言之，如果您可以從DOM中刪除元素，則應使用ng-if，否則應使用ng-show或ng-hide。

Answer 3

ng-show 

當表達式為true時，使您可以display:none元素的display：block；而當表達式為true時， ng-hide可以使您設置display:none 。 他們彼此相對。 不要感到困惑。 僅使用ng-show為ng-show="exp"和ng-show="!exp"來顯示或隱藏元素

Answer 4

眾所周知，angularjs是兩種方式的數據綁定。 我們將ng-hide和ng-show用於兩個不同的目的，一個用於隱藏，另一個用於顯示。 例如，如果您使用一種返回true或false的方法。 無論如何，要顯示一個元素的隱藏都需要隱藏和顯示，而只需使用一種方法。