angular con dinosaurios 2: expresiones

Una síntesis de ng-repeat y los filtros

De Kooning

archivado en: JavaScript / 29 septiembre, 2014 / taller:

Dedicaré esta segunda entrada de la serie angular con dinosaurios a explicar las expresiones, los filtros y una de mis directivas favoritas: ng-repeat. Es una entrada muy escueta, porque casi todo lo expliqué ya en la introducción ligera que hice meses atrás y me da cierta pereza repetirme :P.

ng-repeat

Esta directiva sirve para repetir un fragmento de HTML. En general, se usa a partir de los datos de un jasonako para mostrar datos, al estilo de los bucles que se hacen en PHP para pintar algo a partir de una consulta MySQL. La sintaxis es muy sencilla:

<tag ng-repeat="item in items">

donde item es el nombre que le das e items el del json. Por ejemplo, si tenemos este json (que aquí pongo en el controller, pero que ya veremos que debe ir en una factoría del módulo):

miModulo.controller("miControlador", function($scope) {

$scope.dinosaurios = [{

nombre: 'Rapetosaurus',

grupo: 'Titanosauria',

longitud: '15',

alimentacion: 'herbívoro'

}, {

nombre: 'Alamosaurus',

grupo: 'Titanosauria',

longitud: '21',

alimentacion: 'herbívoro'

}, {

nombre: 'Tyrannosaurus rex',

grupo: 'Tyrannosauroidea',

longitud: '13',

alimentacion: 'carnívoro'

}, {

nombre: 'Stegosaurus',

grupo: 'Stegosauridae',

longitud: '5',

alimentacion: 'herbívoro'

}

];

});

Para mostrar esos datos en una tabla es tan sencillo como hacer esto en la vista:

<table>

<tr>

<th>nombre</th>

<th>grupo</th>

<th>tamaño</th>

<th>alimentación</th>

</tr>

<tr ng-repeat="dinosaurio in dinosaurios" >

<td>{{dinosaurio.nombre}}</td>

<td>{{dinosaurio.grupo}}</td>

<td>{{dinosaurio.longitud}}</td>

<td>{{dinosaurio.alimentacion}}</td>

</tr>

</table>

Filtros

Además, podemos acompañar esta directiva de una serie de «filtros» que recuerdan a las cláusulas habituales de MySQL (where, order by, limit...). Se pueden añadir todos los filtros que se quiera, separados por la barra horizontal |, y su forma más sencilla es:

| filter : valor = algo

Por ejemplo, de esta manera solo se mostrarían los dinosaurios herbívoros (equivaldría a una especia de where en sql):

<tr ng-repeat="dinosaurio in dinosaurios | filter: alimentacion=tipoAlimentacion" >

Otro filtro que podemos incluir es orderBy, que, como se deduce, permite ordenar los items por algún campo. Seguido de :true o :false lo hace de forma ascendente o descendente. Por ejemplo, así ordenaríamos los dinosaurios según su tamaño:

<tr ng-repeat="dinosaurio in dinosaurios | orderBy : 'longitud' : true" >

Otro parámetro que recuerda a SQL es limitTo, que limita el bucle al número indicado. Por ejemplo, así solo mostraríamos un dinosaurio:

<tr ng-repeat="dinosaurio in dinosaurios | limitTo:1" >

Además de estos filtros relacionados con la «consulta», hay otros que formatean la salida y son:

  • currency: añade un símbolo a un número.
  • date: convierte una cadena en una fecha.
  • lowercase: en mayúsculas.
  • uppercase: en minúsculas.
  • number: si la salida no es un número da una cadena vacía.

Expresiones y data-binding

En cualquier sitio donde pongamos contenido entre llaves {{contenido}}, es decir, donde insertemos contenido dinámico, en las expresiones dicho en angularesco, tenemos a nuestra disposición varias operaciones:

  • operadores matemáticos: +, -, /, *, %.
  • de comparación: ==, !=.
  • lógicos: &&, !!, !.
  • Y además podemos incluir funciones.

Estas expresiones se renderizan cuando se carga la página, pero luego «permanecen a la escucha»; esto es, si cambia algo en los datos de partida, por ejemplo, si se modifica el valor de una variable al pulsar un botón, en la vista ese cambio se ve reflejado enseguida, sin necesidad de volver a renderizar de nuevo la página. Es lo que en angularesco se denomina data-binding, un concepto que sintetiza esta imagen de la documentación oficial:

Two_Way_Data_Binding

 

Por ejemplo, mediante la directiva ng-click, que ya expliqué en la introducción anterior a esta serie...

ng-click="seleccionBichos(1)"

...llamamos a una función del controller que define una variable de la vista llamada tipoAlimentación como herbívoros...

var tipoBichoAqui = "desactivado";

$scope.seleccionBichos = function(tipoBicho) {

if ( tipoBicho == 1 && tipoBichoAqui == "desactivado" ) {

$scope.tipoAlimentacion = "herbívoro";

tipoBichoAqui = "activado";

} else {

$scope.tipoAlimentacion = "";

tipoBichoAqui = "desactivado";

}

};

Esa variable está en el ng-repeat, por lo que el cambio se produce en el acto. (Ver demo en Plunker).

<tr ng-repeat="dinosaurio in dinosaurios | filter : nombre=nombreDinosario | filter: alimentacion=tipoAlimentacion | orderBy : 'longitud' : true" >

Por último, decir que es frecuente usar este data-binding con la directiva ng-model, por lo general en inputs, selects y textareas, que a pesar del nombre no debemos confundir con los «consulta». Lo que hace es lo mismo, es decir, relacionar el controlador con la interacción del usuario de la vista de tal forma que las cosas se renderizan en tiempo real.

Bueno, por hoy vamos a dejarlo aquí.

|| Tags: , ,

valoración de los lectores sobre angular con dinosaurios 2: expresiones

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 5 sobre 5 (3 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Los comentarios están cerrados.