Diferencias

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

Enlace a la vista de comparación

unidades:02_angular:05_ngdisabled [2014/07/14 17:51]
admin [Funciones con parámetros]
unidades:02_angular:05_ngdisabled [2015/04/12 20:23] (actual)
admin [Llamando a Funciones]
Línea 4: Línea 4:
 Lo importante de la directiva es que habilita o deshabilita el elemento en función de cualquier valor del ''​$scope''​ y por lo tanto de nuestro modelo. Lo importante de la directiva es que habilita o deshabilita el elemento en función de cualquier valor del ''​$scope''​ y por lo tanto de nuestro modelo.
  
-En nuestro ejemplo del seguro médico tenemos el campo "​Nombre de la alergia"​. Este campo solo tiene sentido que esté habilitado cuando el usuario ha marcado que tiene alguna alergia, así que vamos a hacer que solo esté habilitado el ''<​input>''​ del nombre de la alergia cuando el valor ''​$scope.seguro.enfermedades.alergia''​ valga true. Es decir que si marcamos que tenemos alergia , entonces se habilitará el nombre de la alergia y si no marcamos que tenemos alergia se deshabilitará el campo del nombre de la alergia.+En nuestro ejemplo del seguro médico tenemos el campo "​Nombre de la alergia"​. Este campo sólo tiene sentido que esté habilitado cuando el usuario ha marcado que tiene alguna alergia, así que vamos a hacer que sólo esté habilitado el ''<​input>''​ del nombre de la alergia cuando el valor ''​$scope.seguro.enfermedades.alergia''​ valga true. Es decir que si marcamos que tenemos alergia , entonces se habilitará el nombre de la alergia y si no marcamos que tenemos alergia se deshabilitará el campo del nombre de la alergia.
  
 <sxh html;​title:​index.html;​ highlight: [25];> <sxh html;​title:​index.html;​ highlight: [25];>
Línea 46: Línea 46:
 </​sxh>​ </​sxh>​
  
-  * Línea 33: Se puede ver como hemos incluido la directiva ''​ng-disabled''​. Su valor es la expresión en JavaScript ''​seguro.enfermedades.alergia===false''​. En caso de que la anterior expresión sea ''​verdadera''​ se deshabilitará el ''<​input>''​.+  * Línea 33: Se puede ver que hemos incluido la directiva ''​ng-disabled''​. Su valor es la expresión en JavaScript ''​seguro.enfermedades.alergia===false''​. En caso de que la anterior expresión sea ''​verdadera''​ se deshabilitará el ''<​input>''​.
  
 <sxh js; title:​script.js;>​ <sxh js; title:​script.js;>​
Línea 81: Línea 81:
  
 ===== Expresión de la directiva ===== ===== Expresión de la directiva =====
-Hemos visto en el ejemplo anterior que en ''​ng-disabled''​ se ha usado la expresión ''​seguro.enfermedades.alergia===false''​. Pero, ¿que se puede poner realmente como valor del atributo?. La respuesta sencilla es que se puede poner cualquier expresión JavaScript pero se evaluará referida al ''​$scope''​. La respuesta un poco mas complicada es que realmente no es JavaScript sino un subconjunto de él. Es AngularJS el que se encarga de interpretar las expresiones por lo que no podremos usar cualquier expresión de JavaScript sino solo aquello que haya implementado AngularJS en su interprete de las expresiones.+Hemos visto en el ejemplo anterior que en ''​ng-disabled''​ se ha usado la expresión ''​seguro.enfermedades.alergia===false''​. Pero, ¿qué ​se puede poner realmente como valor del atributo?. La respuesta sencilla es que se puede poner cualquier expresión JavaScript pero se evaluará referida al ''​$scope''​. La respuesta un poco más complicada es que realmente no es JavaScript sino un subconjunto de él. Es AngularJS el que se encarga de interpretar las expresiones por lo que no podremos usar cualquier expresión de JavaScript sino sólo aquello que haya implementado AngularJS en su interprete de las expresiones.
  
 <​note>​ <​note>​
Línea 113: Línea 113:
 <sxh js> <sxh js>
 $scope.disabledNombreAlergia=function() { $scope.disabledNombreAlergia=function() {
-  return (seguro.enfermedades.alergia===false)+  return ($scope.seguro.enfermedades.alergia===false)
 } }
 </​sxh>​ </​sxh>​
  
-Ahora podemos ​llamar a la función desde la directiva quedando de la siguiente forma:+podremos ​llamar a la función desde la directivaquedando de la siguiente forma:
 <sxh html> <sxh html>
 <input ng-disabled="​disabledNombreAlergia()"​ id="​nombreAlergia"​ name="​nombreAlergia"​ type="​text"​ ng-model="​seguro.enfermedades.nombreAlergia"​ /> <input ng-disabled="​disabledNombreAlergia()"​ id="​nombreAlergia"​ name="​nombreAlergia"​ type="​text"​ ng-model="​seguro.enfermedades.nombreAlergia"​ />
 </​sxh>​ </​sxh>​
  
-Ahora desde la directiva llamamos a la función ''​disabledNombreAlergia()''​ pero solo porque dicha función está definida en el ''​$scope''​.+Ahora desde la directiva llamamos a la función ''​disabledNombreAlergia()''​ pero sólo porque dicha función está definida en el ''​$scope''​.
 ==== Funciones con parámetros ==== ==== Funciones con parámetros ====
 Otra posibilidad es que a la función se le pueden pasar parámetros,​ tanto literales como valores del ''​$Scope''​ o incluso el resultado de otras funciones. Todo ésto recordad que se evalua referido siempre al ''​$scope''​. Otra posibilidad es que a la función se le pueden pasar parámetros,​ tanto literales como valores del ''​$Scope''​ o incluso el resultado de otras funciones. Todo ésto recordad que se evalua referido siempre al ''​$scope''​.
Línea 133: Línea 133:
 } }
  
-$scope.isPositivo=function(c) { +$scope.isNegativo=function(c) { 
-  if (c>0) {+  if (c<0) {
     return true;     return true;
   } else {   } else {
Línea 142: Línea 142:
 </​sxh>​ </​sxh>​
  
-Hemos definido la función ''​suma''​ que acepta dos parámetros y la función ''​isPositivo''​ que acepta uno.+Hemos definido la función ''​suma''​ que acepta dos parámetros y la función ''​isNegativo''​ que acepta uno.
  
 <sxh html> <sxh html>
-<input ng-disabled="​isPositivo(suma(seguro.edad,​10))"​ id="​nombreAlergia"​ name="​nombreAlergia"​ type="​text"​ ng-model="​seguro.enfermedades.nombreAlergia"​ />+<input ng-disabled="​isNegativo(suma(seguro.edad,​10))"​ id="​nombreAlergia"​ name="​nombreAlergia"​ type="​text"​ ng-model="​seguro.enfermedades.nombreAlergia"​ />
 </​sxh>​ </​sxh>​
  
-Ahora vemos como desde la directiva se llama a la función ''​isPositivo''​ pasándole como argumento el resultado de llamar a la función ''​suma''​. A la función ''​suma''​ se le pasan 2 argumentos, uno es el valor del propio ''​$scope''​ correspondiente a ''​seguro.edad''​ y el otro es el valor ''​10''​.+Ahora vemos cómo desde la directiva se llama a la función ''​isNegativo''​ pasándole como argumento el resultado de llamar a la función ''​suma''​. A la función ''​suma''​ se le pasan 2 argumentos, uno es el valor del propio ''​$scope''​ correspondiente a ''​seguro.edad''​ y el otro es el valor ''​10''​
 + 
 +Ahora si ponemos una edad negativa se deshabilita el campo ''​nombreAlergia''​. Obviamente esto no es de ninguna utilidad pero sirve de ejemplo de como llamar a funciones con argumentos.
  
 <note tip> <note tip>
Línea 161: Línea 163:
 //"Si el campo "​alergia"​ está desactivado,​ el campo "​nombre de la alergia"​ debe deshabilitarse"//​ //"Si el campo "​alergia"​ está desactivado,​ el campo "​nombre de la alergia"​ debe deshabilitarse"//​
  
-Antes de AngularJS ((O Ember o Knockout, etc.)) debíamos comprobar todas las veces en las que cambiáramos ​el valor de "​alergia" ​acordarnos ​de ejecutar la regla que deshabilitaba el campo "​nombre de la alergia"​. ​Esto resultaba ​en un problema ya que era fácil que olvidáramos ejecutar dicha reglas.+Antes de AngularJS ((O Ember o Knockout, etc.)) debíamos comprobar todas las veces que cambiábamos ​el valor de "​alergia" ​yacordarnos ​de ejecutar la regla que deshabilitaba el campo "​nombre de la alergia"​. ​Ésto resultaba un problema ya que era fácil que olvidáramos ejecutar dicha reglas.
  
 Aunque pueda parecer sencillo, el tema se complicaba mucho al haber muchas reglas y muchos valores que disparaban esa reglas. Estas reglas suelen ser del tipo: Aunque pueda parecer sencillo, el tema se complicaba mucho al haber muchas reglas y muchos valores que disparaban esa reglas. Estas reglas suelen ser del tipo:
Línea 167: Línea 169:
 //SI// Se modifica el valor **X1** o **X2**,​...**Xn** //​ENTONCES//​ Hacer la acción sobre **Y** //SI// Se modifica el valor **X1** o **X2**,​...**Xn** //​ENTONCES//​ Hacer la acción sobre **Y**
  
-El problema era que las reglas se debían programar tras el código que modifica **X1** y tras el código que modifica ​ **X2** y ... tras el código que modifica **Xn** y si cada uno de ellos se modifica en varios sitios hacerlo en cada uno de ellos, cuando lo realmente cómodo sería ​ poner la regla una única vez y que se llamara automáticamente cuando hiciera falta.+El problema era que las reglas se debían programar tras el código que modifica **X1** y tras el código que modifica ​ **X2** y ... tras el código que modifica **Xn** y si cada uno de ellos se modifica en varios sitioshacerlo en cada uno de ellos, cuando lo realmente cómodo sería ​ poner la regla una única vez y que se llamara automáticamente cuando hiciera falta.
  
-Gracia a AngularJS ahora solo es necesario poner la regla una única vez y ya se llamará cada vez que se modifique alguno de los valores de los que depende. ​Eso simplifica ​significamente ​nuestro código ya que ahora solo ponemos la regla una única vez independientemente de cuantos ​valores dependa y de en cuantos ​sitios se modifique cada uno de esos valores.+Gracia a AngularJS ahora sólo es necesario poner la regla una única vez y ya se llamará cada vez que se modifique alguno de los valores de los que depende. ​Éso simplifica ​significativamente ​nuestro código ya que ahora sólo ponemos la regla una única vez independientemente de cuántos ​valores dependa y de en cuántos ​sitios se modifique cada uno de esos valores.
 ===== Ejemplo ===== ===== Ejemplo =====
  
Línea 176: Línea 178:
 ===== Referencias ===== ===== Referencias =====
   * [[https://​docs.angularjs.org/​api/​ng/​directive/​ngDisabled|ngDisabled]]   * [[https://​docs.angularjs.org/​api/​ng/​directive/​ngDisabled|ngDisabled]]
 +  * [[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}}
unidades/02_angular/05_ngdisabled.1405353095.txt.gz · Última modificación: 2014/07/14 17:51 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