Modelo

Ya hemos visto cómo tener un esqueleto básico de una aplicación, aunque ésta realmente no hace nada. Veamos ahora cómo declarar un modelo con nuestros datos y cómo mostrarlo en la página HTML.

Creando el modelo

Vamos a desarrollar un ejemplo para capturar datos de usuarios en una compañía de seguros.

function MiPageController($scope) {

  var datos={
    nombre:"Rafel Lorenzo",
    ape1:"González",
    ape2:"Aznar"
  };


  $scope.seguro=datos;
}

Vemos cómo en las líneas de la 3 a la 7 declaramos un objeto JavaScript con los datos que queremos mostrar en la aplicación.
En la línea 10 guardamos esos datos en el $scope con el nombre de seguro.

Mostrando el modelo

Tags

Modifiquemos ahora la página HTML para mostrar los datos del modelo:

<body ng-controller="MiPageController" >
  Nombre:{{seguro.nombre}}<br />
  Primer apellido:{{seguro.ape1}}<br />
  Segundo apellido:{{seguro.ape2}}<br />
</body>

Se puede apreciar las {{ }} (llaves) que usa AngularJS para mostrar los datos del modelo en la página HTML. Como vemos no tenemos que incluir código JavaScript que copia los datos en la página HTML, AngularJS lo realiza automáticamente.

Destacar que debemos incluir la palabra seguro delante de cada uno de los campos. Esto es así ya que podemos tener todos los modelos que deseemos en el ''$scope'' y cada uno tendría su propio nombre y campos.

Demo

input

Acabamos de ver cómo mostrar los datos en una página HTML, pero ¿y si queremos modificar el modelo? En HTML utilizaremos por ejemplo los tags <input> para que el usuario introduzca los datos. Además mediante los atributos ng-model ligamos los datos introducidos por el usuario con el modelo.

Modifiquemos el HTML anterior para ver cómo podemos cambiar el modelo.

<body ng-controller="MiPageController" >
  Nombre:{{unidades:seguro.nombre}}<br />
  Primer apellido:{{unidades:seguro.ape1}}<br />
  Segundo apellido:{{unidades:seguro.ape2}}<br />
  <br />
  <br />
   Nombre:<input type="text" ng-model="seguro.nombre" ><br/>
   Primer apellido:<input type="text" ng-model="seguro.ape1" ><br/>
   Segundo apellido:<input type="text" ng-model="seguro.ape2" ><br/>      
</body>

Observa las líneas 7, 8 y 9. El usuario, cuando modifica el contenido de los controles input, está modificando directamente el modelo, y estos cambios aparecen inmediatamente en las líneas 2, 3 y 4, en las que se muestran los valores de las variables del modelo.

Por tanto, si modificamos alguno de los valores de los <input>, automáticamente se cambia el valor del modelo y se ve reflejado en la página HTML. Esta es la “magia” de Angular.

Demo

unidades/01_introduccion/02_modelo.1378849629.txt.gz · Última modificación: 2013/09/10 23:47 por admin

Ir hasta arriba