menú
buscar
Diferencias
Muestra las diferencias entre dos versiones de la página.
|
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 decir, que 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 punto, por lo que sería incorrecta. |
| </note> | </note> | ||
