Qual è la differenza tra `ng-show` e` ng-hide`?

Question

Questi attributi hanno entrambi un valore true o false, quindi che differenza c'è tra loro? Avrebbe senso se non ci fossero valori per loro.

Mi manca qualcosa?

Answer 1

Con ng-show l'elemento viene visualizzato se l'espressione è vero, si nasconderà se è falso

D'altra parte con ng-hide l'elemento è nascosto se l'espressione è vero e verrà mostrato se è false.

Solo due lati della stessa moneta.

Answer 2

ricordare anche è ng-if che prende un'espressione booleana come ng-show e ng-hide ma anziché mostrare/nascondere gli elementi a seconda della espressione, completamente rimosso l'elemento dal DOM se l'espressione è false e inserisce l'elemento torna nel DOM se l'espressione diventa true

Answer 3

Su un progetto su cui stavo lavorando in precedenza, ho trovato utile avere l'opzione sia di ng-show sia di ng-hide. Il motivo è che avevo un link nella mia barra di navigazione che doveva solo mostrare se l'utente era su una vista specifica. Ecco quello scenario:

<li ng-hide="isActive('/about') || isActive('/contact')" ng-class="{ 'vert-nav-active': isActive('/investigator')}" class="top-buffer"> 
<a href="#/investigator" class="buff-sides navListLinks">Investigator Portal</a> 
</li> 

Ora, si potrebbe dire, ben si può solo fare il isActive('/about') || isActive('/contact') restituire il booleano opposto e cambiare il ng-hide-ng-show e ogni cosa rimarrà lo stesso, ma come si può vedere che sono anche usando questa funzione per determinare quale collegamento sono attivo. Se inverto questa logica, sembrerà che io sia su ogni link eccetto il link effettivo su cui sono. Concesso I potrebbe scrivere un'altra funzione per il ng-show ma mi piace riutilizzare il codice che è già lì.

Answer 4

ng presentazione visualizzerà solo l'elemento se l'espressione è vero ...

<span ng-show="true">Will Show </span> 
<span ng-show="false">Will not Show </span> 

ng-nascondere, non visualizzerà l'elemento se l'espressione è vero, ma verrà visualizzato se l'espressione è falsa.

<span ng-hide="true">Will not display</span> 
<span ng-hide="false">Will display</span> 

Answer 5

ho un buon scenario, diciamo che si desidera mostrare un attributo o l'altro a seconda di una convalida, ma non entrambi, in modo da utilizzare sia ng-show e ng-nascondere in questo modo:

<div ng-show="validation"></div> 
<div ng-hide="validation"></div> 

se la validazione è vera, mostrerebbe il primo div, ma se è falso mostrerebbe il secondo div ... questo può essere fatto in molti altri modi ma è una soluzione di cleaver per un problema difficile: D