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

Recuerda que una referencia completa de lo que se puede poner como expresión está en angular_expressions_cheatsheet.pdf

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.

Usa ng-show o ng-hide de forma que la expresión resultante sea la mas sencilla de entender por parte de otra persona.

Referencias

unidades/02_angular/07_nghide.txt · Última modificación: 2014/08/29 20:25 por admin
Ir hasta arriba
CC Attribution-Share Alike 3.0 Unported
chimeric.de = chi`s home Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0
Esta web utiliza cookies, puedes ver nuestra la política de cookies, aquí Si continuas navegando estás aceptándola
Política de cookies +