Diferencias

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

Enlace a la vista de comparación

unidades:02_angular:04_formulario [2014/07/14 21:46]
admin
unidades:02_angular:04_formulario [2014/08/29 20:06] (actual)
admin
Línea 1: Línea 1:
 ====== 2.4 Formulario ====== ====== 2.4 Formulario ======
-Ahora que ya tenemos un conocimiento inicial de angular , ya podemos empezar a hacer un ejemplo un poco mas real.El objetivo de este tema es crear un formulario (AngularJS tiene muchas ​mas funcionalidades relativas a formularios que veremos ​mas adelante) que permita la entrada de datos de un hipotético seguro médico.+Ahora que ya tenemos un conocimiento inicial de angular , ya podemos empezar a hacer un ejemplo un poco más real.El objetivo de este tema es crear un formulario (AngularJS tiene muchas ​más funcionalidades relativas a formularios que veremos ​más adelante) que permita la entrada de datos de un hipotético seguro médico.
  
 ===== Modelo ===== ===== Modelo =====
Línea 82: Línea 82:
 </​sxh>​ </​sxh>​
  
-  * Línea 15: Se puede ver como hemos usado el tag ''<​select>''​ en vez de un ''<​input>''​. AngularJS reconoce perfectamente el tag ''<​select>''​ y no hay que hacer nada especial con él (( Ya veremos que angular tiene una directiva llamada ''​ngOption''​ para evitar poner manualmente los tags ''<​option>''​. )). Lo que aparece en el atributo ''​value''​ de los tag ''<​option>''​ es lo que se guardará como valor en JavaScript. En este caso los valores son "​H"​ y "​M"​. +  * Línea 15: Se puede ver cómo hemos usado el tag ''<​select>''​ en vez de un ''<​input>''​. AngularJS reconoce perfectamente el tag ''<​select>''​ y no hay que hacer nada especial con él (( Ya veremos que angular tiene una directiva llamada ''​ngOption''​ para evitar poner manualmente los tags ''<​option>''​. )). Lo que aparece en el atributo ''​value''​ de los tag ''<​option>''​ es lo que se guardará como valor en JavaScript. En este caso los valores son "​H"​ y "​M"​. 
-  * Línea 16: Al igual que con el ''<​option>''​ ahora hacemos uso de un tag ''<​input>''​ del tipo ''​checkbox''​. Si lo marcamos en JavaScript se guardará un ''​true''​ y si lo desmarcamos se guardará un ''​false''​. Es decir que no hace falta hacer nada especial para usar un booleano. +  * Línea 16: Al igual que con el ''<​option>''​ ahora hacemos uso de un tag ''<​input>''​ del tipo ''​checkbox''​. Si lo marcamos en JavaScript se guardará un ''​true''​ y si lo desmarcamos se guardará un ''​false''​. Es decirque no hace falta hacer nada especial para usar un booleano. 
- * Línea 19: Vemos como la fecha se muestra en formato inglés. Este problema ya lo arreglaremos ​mas adelante ya que el tratamiento de fechas no es sencillo.+ * Línea 19: Vemos cómo la fecha se muestra en formato inglés. Este problema ya lo arreglaremos ​más adelante ya que el tratamiento de fechas no es sencillo.
  
 <sxh js; title:​script.js;​ highlight: [4,​13,​18];>​ <sxh js; title:​script.js;​ highlight: [4,​13,​18];>​
Línea 116: Línea 116:
 </​sxh>​ </​sxh>​
  
-  * Línea 4: Lo mas importante aquí es que todas las propiedades de nuestro modelo no está ne el ''​$scope''​ sino que creamos un nuevo objeto con las propiedades de nuestro modelo y éste se asigna al ''​$scope''​. +  * Línea 4: Lo más importante aquí es que todas las propiedades de nuestro modelo no están en el ''​$scope''​ sino que creamos un nuevo objeto con las propiedades de nuestro modelo y éste se asigna al ''​$scope''​. 
-  * Líneas 13 y 18: Vemos como hemos creado otros objetos dentro del objeto principal. ​Esto es algo normal en cualquier lenguaje para poder organizar las propiedades de nuestro modelo. Así por ejemplo para acceder a propiedad ''​alergia'' ​habrás ​que escribir:+  * Líneas 13 y 18: Vemos cómo hemos creado otros objetos dentro del objeto principal. ​Ésto es algo normal en cualquier lenguaje para poder organizar las propiedades de nuestro modelo. Así ,por ejemplo,  ​para acceder a propiedad ''​alergia'' ​tendrás ​que escribir:
 <sxh js> <sxh js>
 $scope.seguro.enfermedades.alergia $scope.seguro.enfermedades.alergia
Línea 125: Línea 125:
 En AngularJS hay un dicho que dice: "**Si el valor de tu directiva ''​ng-model''​ no incluye un punto es que está mal.**"​ En AngularJS hay un dicho que dice: "**Si el valor de tu directiva ''​ng-model''​ no incluye un punto es que está mal.**"​
  
-¿que quiere decir eso? Que nunca pongas propiedades con valores directamente en el ''​$scope''​ sino que crees un objeto con las propiedades que necesites y asignes dicho objeto al ''​$scope''​+¿Qué ​quiere decir éso? Que nunca pongas propiedades con valores directamente en el ''​$scope''​ sino que crees un objeto con las propiedades que necesites y asignes dicho objeto al ''​$scope''​
  
-¿Porque ​necesitamos hacer eso? El motivo es que Angular en ciertas directivas creará nuevos //scopes// que heredarán de tu ''​$scope''​ y si pones las propiedades directamente en el ''​$scope''​ fallarán en ciertos casos y te costará descubrir ​que ha pasado. ​+¿Por qué necesitamos hacer éso? El motivo es que Angular en ciertas directivas creará nuevos //scopes// que heredarán de tu ''​$scope''​ y si pones las propiedades directamente en el ''​$scope''​ fallarán en ciertos casos y te costará descubrir ​qué ha pasado. ​
  
 En el ejemplo anterior todos las propiedades de la directiva ''​ng-model''​ empiezan por "​seguro."​ , es decir, que siempre llevan un "​punto",​ por lo que es correcto. En el ejemplo anterior todos las propiedades de la directiva ''​ng-model''​ empiezan por "​seguro."​ , es decir, que siempre llevan un "​punto",​ por lo que es correcto.
Línea 137: Línea 137:
 </​sxh>​ </​sxh>​
  
-En ese caso la directiva ''​ng-model''​ tiene el valor "​nif",​ es decir que **NO** tendría punto por lo que es incorrecta.+En ese caso la directiva ''​ng-model''​ tiene el valor "​nif",​ es decir que **NO** tendría puntopor lo que sería ​incorrecta.
  
 </​note>​ </​note>​
unidades/02_angular/04_formulario.txt · Última modificación: 2014/08/29 20:06 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 +