menú
buscar
Diferencias
Muestra las diferencias entre dos versiones de la página.
|
unidades:02_angular:04_formulario [2014/07/07 18:09] 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 y ya podemos empezar a hacer un pequeño ejemplo funcional.El objetivo de este tema es crear un formulario de 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 33: | Línea 33: | ||
| class Sexo <<Enumeration>> | class Sexo <<Enumeration>> | ||
| - | Sexo : Hombre | + | Sexo : H |
| - | Sexo : Mujer | + | Sexo : M |
| Coberturas "1"-"1" Seguro | Coberturas "1"-"1" Seguro | ||
| Línea 41: | Línea 41: | ||
| </uml> | </uml> | ||
| - | En nuestro controlador de AngularJS ahora vamos a definir la variable del ''$scope'' que contendrá todos estos datos. | ||
| - | <sxh js; title:script.js> | + | <sxh html; title:index.html; highlight: [15,16,19];> |
| + | <!DOCTYPE html> | ||
| + | <html ng-app="app"> | ||
| + | <head> | ||
| + | <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script> | ||
| + | <script src="script.js"></script> | ||
| + | </head> | ||
| + | <body ng-controller="SeguroController"> | ||
| + | <form> | ||
| + | <fieldset> | ||
| + | <legend>Seguro Médico</legend> | ||
| + | <label for="nif">NIF:</label><input id="nif" name="nif" type="text" ng-model="seguro.nif" /><br> | ||
| + | <label for="nombre">Nombre:</label><input id="nombre" name="nombre" type="text" ng-model="seguro.nombre" /><br> | ||
| + | <label for="ape1">1º Apellido:</label><input id="ape1" name="ape1" type="text" ng-model="seguro.ape1" /><br> | ||
| + | <label for="edad">Edad:</label><input id="edad" name="edad" type="text" ng-model="seguro.edad" /><br> | ||
| + | <label for="sexo">Sexo:</label><select id="sexo" name="sexo" type="checkbox" ng-model="seguro.sexo" ><option value="">--Elige opcion--</option><option value="H">Hombre</option><option value="M">Mujer</option></select><br> | ||
| + | <label for="casado">Casado:</label><input id="casado" name="casado" type="checkbox" ng-model="seguro.casado" /><br> | ||
| + | <label for="numHijos">Nº Hijos:</label><input id="numHijos" name="numHijos" type="text" ng-model="seguro.numHijos" /><br> | ||
| + | <label for="embarazada">Embarazada:</label><input id="embarazada" name="embarazada" type="checkbox" ng-model="seguro.embarazada" /><br> | ||
| + | <label for="fechaCreacion">Fecha de creación:</label><input id="fechaCreacion" name="fechaCreacion" type="text" ng-model="seguro.fechaCreacion" /><br> | ||
| + | </fieldset> | ||
| + | <fieldset> | ||
| + | <legend>Coberturas</legend> | ||
| + | <label for="oftalmologia">Oftalmologia:</label><input id="oftalmologia" name="oftalmologia" type="checkbox" ng-model="seguro.coberturas.oftalmologia" /><br> | ||
| + | <label for="dental">Dental:</label><input id="dental" name="dental" type="checkbox" ng-model="seguro.coberturas.dental" /><br> | ||
| + | <label for="fecundacionInVitro">Fecundacion In Vitro:</label><input id="fecundacionInVitro" name="fecundacionInVitro" type="checkbox" ng-model="seguro.coberturas.fecundacionInVitro" /><br> | ||
| + | </fieldset> | ||
| + | <fieldset> | ||
| + | <legend>Enfermedades</legend> | ||
| + | <label for="corazon">Corazon:</label><input id="corazon" name="corazon" type="checkbox" ng-model="seguro.enfermedades.corazon" /><br> | ||
| + | <label for="estomacal">Estomacal:</label><input id="estomacal" name="estomacal" type="checkbox" ng-model="seguro.enfermedades.estomacal" /><br> | ||
| + | <label for="rinyones">Riñones:</label><input id="rinyones" name="rinyones" type="checkbox" ng-model="seguro.enfermedades.rinyones" /><br> | ||
| + | <label for="alergia">Alergia:</label><input id="alergia" name="alergia" type="checkbox" ng-model="seguro.enfermedades.alergia" /><br> | ||
| + | <label for="nombreAlergia">Nombre de la alergia:</label><input id="nombreAlergia" name="nombreAlergia" type="text" ng-model="seguro.enfermedades.nombreAlergia" /><br> | ||
| + | </fieldset> | ||
| + | </form> | ||
| + | </body> | ||
| + | </html> | ||
| + | </sxh> | ||
| + | |||
| + | * 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 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];> | ||
| var app=angular.module("app",[]); | var app=angular.module("app",[]); | ||
| Línea 68: | Línea 111: | ||
| nombreAlergia:"" | nombreAlergia:"" | ||
| }, | }, | ||
| - | fechaCreacion:new Date(); | + | fechaCreacion:new Date() |
| } | } | ||
| } | } | ||
| </sxh> | </sxh> | ||
| + | * 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 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> | ||
| + | $scope.seguro.enfermedades.alergia | ||
| + | </sxh> | ||
| + | |||
| + | <note warning> | ||
| + | En AngularJS hay un dicho que dice: "**Si el valor de tu directiva ''ng-model'' no incluye un punto es que está mal.**" | ||
| + | |||
| + | ¿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'' | ||
| + | |||
| + | ¿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. | ||
| + | |||
| + | Lo que estaría mal sería haber hecho: | ||
| + | |||
| + | <sxh js> | ||
| + | $scope.nif=""; | ||
| + | </sxh> | ||
| + | |||
| + | 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> | ||
| + | |||
| + | ===== Ejemplo ===== | ||
| + | |||
| + | {{url>http://embed.plnkr.co/wRLzJC}} | ||
