¡Esta es una revisión vieja del documento!
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.
Ya hemos visto la importancia del modelo de datos para AngularJS así que vamos a definir nuestro modelo del ejemplo del seguro médico:
<!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><input id="sexo" name="sexo" type="checkbox" ng-model="seguro.sexo" /><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="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="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> <sxh js; title:script.js> var app=angular.module("app",[]); function SeguroController($scope) { $scope.seguro={ nif:"", nombre:"", ape1:"", edad:undefined, sexo:"", casado:false, numHijos:undefined, embarazada:false, coberturas: { oftalmologia:false, dental:false, fecundacionInVitro:false }, enfermedades:{ corazon:false, estomacal:false, rinyones:false, alergia:false, nombreAlergia:"" }, fechaCreacion:new Date(); } }