menú
buscar
Diferencias
Muestra las diferencias entre dos versiones de la página.
|
unidades:02_angular:07_nghide [2014/07/23 16:33] admin [ng-show o ng-hide] |
unidades:02_angular:07_nghide [2014/08/29 20:25] (actual) admin |
||
|---|---|---|---|
| Línea 1: | Línea 1: | ||
| ====== 2.7 Directiva ng-hide ====== | ====== 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 en función de cualquier valor del $scope y por lo tanto de nuestro modelo. Es la opuesta a la directiva [[unidades:02_angular:06_ngshow|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''. | + | 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 [[unidades:02_angular:06_ngshow|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 [[unidades:02_angular:06_ngshow|ng-show]] pero al revés. | En este caso no vamos a poner un ejemplo ya que funciona como la directiva [[unidades:02_angular:06_ngshow|ng-show]] pero al revés. | ||
| Línea 8: | Línea 8: | ||
| <note tip> | <note tip> | ||
| - | Recuerda que una referencia completa de que se puede poner como expresión está en {{:unidades:02_angular:angular_expressions_cheatsheet.pdf|}} | + | Recuerda que una referencia completa de lo que se puede poner como expresión está en {{:unidades:02_angular:angular_expressions_cheatsheet.pdf|}} |
| </note> | </note> | ||
| ===== Reglas de negocio del Interfaz de usuario ===== | ===== Reglas de negocio del Interfaz de usuario ===== | ||
| - | Al igual que con [[unidades:02_angular:05_ngdisabled#reglas_de_negocio_del_interfaz_de_usuario|las reglas de negocio del interfaz de usuario de ng-disabled]] debemos pensar que ahora solo 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. | + | Al igual que con [[unidades:02_angular:05_ngdisabled#reglas_de_negocio_del_interfaz_de_usuario|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 ===== | ===== ng-show o ng-hide ===== | ||
| - | Aunque tampoco es muy importante usar uno u otro , si que viene bien decir cuando usar ''ng-show'' o ''ng-hide'' por coherencia en el proyecto. | + | 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: | 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 deba estar 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. | + | 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 inicialmente o por defecto el tag deba estar 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. | + | 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. Es 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. | + | 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: | Veamos un ejemplo de esto último: | ||
| + | |||
| En nuestro ejemplo anterior de ''ng-show'' teníamos el siguiente tag ''<input>'': | En nuestro ejemplo anterior de ''ng-show'' teníamos el siguiente tag ''<input>'': | ||
| <sxh html> | <sxh html> | ||
| Línea 45: | Línea 46: | ||
| </sxh> | </sxh> | ||
| - | Personalmente siempre me gustan más las condiciones con el "===" que con "!==" creo que una persona las entiende mejor. | + | Personalmente siempre me gustan más las condiciones con "===" que con "!==" , ya que creo que un programador las entiende mejor. |
| <note tip> | <note tip> | ||
| Línea 53: | Línea 54: | ||
| ===== Referencias ===== | ===== Referencias ===== | ||
| * [[https://docs.angularjs.org/api/ng/directive/ngHide|ngHide]] | * [[https://docs.angularjs.org/api/ng/directive/ngHide|ngHide]] | ||
| + | * [[https://docs.angularjs.org/guide/expression|Developer Guide / Expressions]] | ||
| * {{:unidades:02_angular:angular_expressions_cheatsheet.pdf|AngularJS Expressions}} | * {{:unidades:02_angular:angular_expressions_cheatsheet.pdf|AngularJS Expressions}} | ||
