Curso de AngularJS y REST

Herramientas de usuario

Herramientas del sitio

Traza:
unidades:02_angular:04_formulario

Diferencias

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

Enlace a la vista de comparación

Ambos lados, revisión anteriorRevisión previa
Próxima revisión		Revisión previa
unidades:02_angular:04_formulario [2014/07/11 17:49] – adminunidades:02_angular:04_formulario [2026/10/23 18:50] (actual) – editor externo 127.0.0.1
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 26: Línea 26:
  
 class Enfermedades class Enfermedades
-Enfermedades: boolean corazon +Enfermedades : boolean corazon 
-Enfermedades: boolean estomacal +Enfermedades : boolean estomacal 
-Enfermedades: boolean rinyones +Enfermedades : boolean rinyones 
-Enfermedades: boolean alergia +Enfermedades : boolean alergia 
-Enfermedades: String nombreAlergia+Enfermedades : String nombreAlergia
  
 class Sexo <<Enumeration>> class Sexo <<Enumeration>>
Línea 42: Línea 42:
  
  
-<sxh html; title:index.html; highlight: [15,16];>+<sxh html; title:index.html; highlight: [15,16,19];>
 <!DOCTYPE html> <!DOCTYPE html>
 <html ng-app="app"> <html ng-app="app">
Línea 65: Línea 65:
       <fieldset>       <fieldset>
         <legend>Coberturas</legend>         <legend>Coberturas</legend>
-          <label for="embarazada">Embarazada:</label><input id="embarazada" name="embarazada" type="checkbox" ng-model="seguro.embarazada" /><br> 
           <label for="oftalmologia">Oftalmologia:</label><input id="oftalmologia" name="oftalmologia" type="checkbox" ng-model="seguro.coberturas.oftalmologia" /><br>           <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="dental">Dental:</label><input id="dental" name="dental" type="checkbox" ng-model="seguro.coberturas.dental" /><br>
Línea 83: Línea 82:
 </sxh> </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];>
-<sxh js; title:script.js; highlight: [4,13];>+
 var app=angular.module("app",[]); var app=angular.module("app",[]);
    
Línea 114: Línea 115:
 } }
 </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 ===== ===== Ejemplo =====
  
 {{url>http://embed.plnkr.co/wRLzJC}} {{url>http://embed.plnkr.co/wRLzJC}}
- 
unidades/02_angular/04_formulario.1405093780.txt.gz · Última modificación: por admin