En el artículo anterior escribí un pequeño acercamiento al sistema de Módulos y Controladores de AngularJS. En este artículo vamos a introducir un nuevo concepto: el Modelo, y cómo podemos modificarlo mediante eventos de la vista.

Preparación del Ejemplo

En este ejemplo vamos a trabajar con una vista que llamará a un módulo llamado AppGatos, cuyo objetivo será mostrar los datos de un dueño o dueña de gatos y poder cambiar su nombre y apellidos.

Por otro lado,  se mostrará un listado de los gatos de esa persona y nos dará la posibilidad de añadir un nuevo gato al listado. ¡Vamos a ello!

Atributos ng-model y ng-bind

Como vimos en el anterior artículo, cada controlador de AngularJS va a tener como mínimo un parámetro $scope, que va a representar el modelo de dominio del módulo. Para conseguir editar el nombre y el apellido del dueño o dueña de los gatos, vamos a declarar el módulo y el controlador, incializando las variables nombre y apellido.

El atributo ng-model enlaza el elemento al que se aplique con la variable del modelo a la que se aplique. Este enlace es bidireccional (Two-Way-Binding), eso quiere decir que si se modifica el modelo, se actualizará el elemento y que si se modifica el elemento, se actualizará el modelo.

Para ver cómo funciona voy a crear dos inputs en el HTML para que gestionen el nombre y el apellido.

El atributo ng-bind, al igual que ng-model, enlaza el elemento al que se aplique con la variable del modelo a la que se aplique. Pero hay una diferencia, y es que el enlace es de sólo lectura (Read-Only-Binding). Eso quiere decir que sólo se actualizará el elemento HTML si se modifica el modelo.

Siguiendo con el ejemplo, voy a imprimir el nombre y el apellido. El nombre lo imprimiré de la manera estándar de AngularJS ( {{ }} ) y el apellido mediante ng-bind.

Atributo ng-repeat

En muchas ocasiones nos encontramos con colecciones dinámicas que hay que imprimir en la vista respetando, lógicamente, la coherencia entre un elemento y el siguiente. Voy a añadir esta colección de gatos al modelo.

El atributo ng-repeat aplicado a un elemento HTML implica que se va a repetir dicho elemento por cada registro de la colección. Para ver cómo funciona, voy a crear una lista desordenada (ul) y por cada elemento de la colección imprimiré un li.

Atributo ng-click

El atributo ng-click permite añadir funcionalidad al evento click del elemento al que se aplique. Lo primero que voy a hacer es añadir una función al modelo con el que estamos trabajando.

Lo que me interesa es que se vacíen los campos en la vista, así que utilizo el método extend para realizar una copia del objeto. Si no lo hacemos al reiniciar los valores se vaciaría también el elemento de la lista, ya que en AngularJS se trabaja con referencias.

Para terminar voy a crear el formulario en HTML y voy a aplicar el atributo ng-click al botón Añadir Gato

Este es el ejemplo completo:

Pues con esto nos hemos metido un poco más en el funcionamiento del modelo y la creación de eventos. En siguientes tutoriales veremos qué es eso de la inyección de dependencias.

¡Hasta la próxima!

Rupert.