Diferencias

Muestra las diferencias entre dos versiones de la página.

--- unidades:02_angular:07_nghide [2014/07/23 12:14] – [ng-show o ng-hide] admin
+++ unidades:02_angular:07_nghide [2014/08/29 20:25] (actual) – admin
@@ Línea 1: / Línea 1: @@
 ====== 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.
@@ Línea 8: / Línea 8: @@
 <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>
 ===== 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 =====
-Aunque tampoco es muy importante usar uno u otro , si que viene bien decir cuando usarlo 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:
+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>'':
+<sxh html>
+<input ng-show="seguro.sexo==='M'" id="fecundacionInVitro" name="fecundacionInVitro" type="checkbox" ng-model="seguro.coberturas.fecundacionInVitro" />
+</sxh>
+La condición para mostrar el elemento era:
+<sxh js>
+seguro.sexo==='M'
+</sxh>
+Si usáramos ''ng-hide'' quedaría de la siguiente forma:
+<sxh html>
+<input ng-hide="seguro.sexo!=='M'" id="fecundacionInVitro" name="fecundacionInVitro" type="checkbox" ng-model="seguro.coberturas.fecundacionInVitro" />
+</sxh>
+La condición para ocultar el elemento quedaría entonces:
+<sxh js>
+seguro.sexo!=='M'
+</sxh>
+Personalmente siempre me gustan más las condiciones con  "===" que con "!==" , ya que creo que un programador las entiende mejor.
+<note tip>
+Usa ''ng-show'' o ''ng-hide'' de forma que la expresión resultante sea la mas sencilla de entender por parte de otra persona.
+</note>
-Mi recomendación es usar
 ===== Referencias =====
   * [[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}}