menú
buscar
Tabla de Contenidos
2.7 Directiva ng-hide
La directiva ng-hide permite que un elemento de la página se haga invisible o visible en función de cualquier valor del $scope y por lo tanto de nuestro modelo. Es la opuesta a la directiva ng-show pero lo que hace es ocultar el elemento si la expresión es true o hacerlo visible si la expresión es false.
En este caso no vamos a poner un ejemplo ya que funciona como la directiva ng-show pero al revés.
Expresión de la directiva
La expresión que se puede poner en la directiva es del mismo tipo que la expresión de la directiva ng-disabled
Reglas de negocio del Interfaz de usuario
Al igual que con las reglas de negocio del interfaz de usuario de ng-disabled debemos pensar que ahora sólo es necesario indicar cada regla de negocio de interfaz de usuario una única vez y AngularJS llamará a dicha regla cada vez que se modifiquen los datos de los que depende.
ng-show o ng-hide
Aunque tampoco es muy importante usar uno u otro , sí que viene bien decir cuándo usar ng-show o ng-hide por coherencia en el proyecto.
Mi recomendación es usar el contrario a lo que ocurre por defecto. Me voy a explicar:
Si inicialmente o lo normal es que el tag esté visible y lo que queremos es que se haga invisible cuando ocurra cierta condición, mi recomendación entonces es usar ng-hide ya que así estamos indicando que la regla/acción es ocultarlo cuando ocurre cierto evento pero que si no ocurriera estaría visible.
El caso contrario sería que si inicialmente o por defecto el tag está oculto y lo que queremos es que se haga visible cuando ocurra cierta condición, mi recomendación entonces es usar ng-show ya que así estamos indicando que la regla/acción es mostrarlo cuando ocurre cierto evento pero que si no ocurriera estaría invisible.
Otro caso que suele pasar es que realmente no hay una acción que muestre u oculte el elemento sino que en función del estado de otro campo esté o no visible. En ese caso no tiene sentido preguntarse por el concepto de normal o inicialmente. En este último caso lo mejor es usar el que evite una condición negativa que siempre es un poco más difícil de entender.
Veamos un ejemplo de esto último:
En nuestro ejemplo anterior de ng-show teníamos el siguiente tag <input>:
<input ng-show="seguro.sexo==='M'" id="fecundacionInVitro" name="fecundacionInVitro" type="checkbox" ng-model="seguro.coberturas.fecundacionInVitro" />
La condición para mostrar el elemento era:
seguro.sexo==='M'
Si usáramos ng-hide quedaría de la siguiente forma:
<input ng-hide="seguro.sexo!=='M'" id="fecundacionInVitro" name="fecundacionInVitro" type="checkbox" ng-model="seguro.coberturas.fecundacionInVitro" />
La condición para ocultar el elemento quedaría entonces:
seguro.sexo!=='M'
Personalmente siempre me gustan más las condiciones con ”===” que con ”!==” , ya que creo que un programador las entiende mejor.
ng-show o ng-hide de forma que la expresión resultante sea la mas sencilla de entender por parte de otra persona.
Referencias
Ir hasta arriba
