Diferencias

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

--- unidades:04_masdirectivas:04_ngrepeat [2014/07/31 14:01]
admin
+++ unidades:04_masdirectivas:04_ngrepeat [2014/08/29 22:37] (actual)
admin
@@ Línea 1: / Línea 1: @@
 ====== 4.4 ng-repeat ======
+Esta directiva es una de las más útiles de AngularJS y permite repetir una serie de tag HTML en función de un array ((Se permiten otras cosas a parte de arrays pero aquí sólo veremos arrays)) de datos de ''$scope''. Su utilidad es para hacer tablas o similar, es decir para estructuras que se repiten.
+Veamos un ejemplo para explicar su funcionamiento.
+<sxh js;highlight: [4];>
+var app = angular.module("app", []);
+app.controller("PruebaController", function($scope) {
+  $scope.provincias=[
+    {
+      idProvincia:2,
+      nombre:"Castellón"
+    },
+    {
+      idProvincia:3,
+      nombre:"Alicante"
+    },
+    {
+      idProvincia:1,
+      nombre:"Valencia"
+    },
+    {
+      idProvincia:7,
+      nombre:"Teruel"
+    },
+    {
+      idProvincia:5,
+      nombre:"Tarragona"
+    },
+  ];
+});
+</sxh>
+  * Linea 4: La propiedad ''provincias'' del ''$scope'' es un array de objetos.
+<sxh html;highlight: [9,10,11];>
+  <table>
+    <thead>
+      <tr>
+        <th>IdProvincia</th>
+        <th>Nombre</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr ng-repeat="provincia in provincias">
+        <td>{{provincia.idProvincia}}</td>
+        <td>{{provincia.nombre}}</td>
+      </tr>
+    </tbody>
+  </table>
+</sxh>
+  * Linea 9: La directiva ''ng-repeat'' hará que se repita el tag en el que se encuentra junto a su contenido. En nuestro caso es el tag ''<tr>'' y los dos tag ''<td>''. Se repetirá tantas veces como elementos haya en el array. En nuestro caso el array es ''provincias''. Además se ha creado una nueva variable llamada ''provincia'' que contiene cada uno de los elementos de array.
+  * Línea 10: Para acceder a cada uno de los elementos del array y mostrar sus datos usamos la nueva variable ''provincia'' ya que si no lo hacemos seguiremos accediendo a las propiedades del ''$scope''. Es este caso accedemos a cada una de las propiedades de ''idProvincia'' mediante ''provincia.idProvincia''.
+  * Línea 11: Lo mismo que en el caso anterior pero ahora mostrando el nombre mediante ''provincia.nombre''.
+===== Otras variables =====
+Hemos visto que dentro del bucle de ''ng-repeat'' se crea una nueva variable definida por nosotros llamada ''provincia''. AngularJS también crea otra serie se variables que podemos usar:
+  * ''$index'': Un número que indica el nº de elementos(de 0 a n-1).
+  * ''$first'' : Vale ''true'' si estamos en el primer elemento del bucle.
+  * ''$last'' : Vale ''true'' si estamos en el último elemento del bucle.
+  * ''$middle'' : Vale ''true'' si **no** estamos ni en el primer ni en el último elemento del bucle.
+  * ''$even'' : Vale true si estamos en un elemento con ''$index'' par. (El 0 es par).
+  * ''$odd'' : Vale true si estamos en un elemento con ''$index'' impar. (El 0 es par).
+Todas estas variable son muy útiles para cambiar el estilo de la filas.
+Podemos modificar el ejemplo anterior de forma que las filas pares sean de fondo blanco y la impares de fondo amarillo:
+<sxh>
+<tr ng-repeat="provincia in provincias" style="background-color:{{$even?'white':'yellow'}}">
+</sxh>
+Se ha usado el [[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator|operador ternario de javaScript]] para que cuando la variable ''$even'' sea ''true'' se retorne "white" y cuando sea ''false'' se retorne ''yellow''.
+<note important>
+Para cambiar el estilo hay formas mejores de hacerlo en AngularJS mediante las directivas [[unidades:04_masdirectivas:09_ngstyle|ng-style]] y [[unidades:04_masdirectivas:10_ngclass|ng-class]]
+</note>
+Tambien podemos modificar el ejemplo haciendo que se muestre el Nº de fila en la que estamos:
+<sxh html;highlight: [13]>
+  <table>
+    <thead>
+      <tr>
+        <th>IdProvincia</th>
+        <th>Nombre</th>
+        <th>Nº fila</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr ng-repeat="provincia in provincias" style="background-color:{{$even?'white':'yellow'}}">
+        <td>{{provincia.idProvincia}}</td>
+        <td>{{provincia.nombre}}</td>
+        <td>{{$index}}</td>
+      </tr>
+    </tbody>
+  </table>
+</sxh>
+Aquí hemos añadido una tercera columna para mostrar la variable ''$index''.
+===== Repetir varias etiquetas =====
+''ng-repeat'' sólo permite repetir un único tag HTML y su contenido, pero ¿cómo podemos repetir varios tags? Antes había que meterlo todo dentro de un tag ''<div>'' y repetir el tag ''<div>'' pero ahora se permite la siguiente estructura:
+<sxh html>
+  <strong ng-repeat-start="provincia in provincias" >{{provincia.idProvincia}}</strong> {{provincia.nombre}}
+  <br ng-repeat-end>{{provincia.nombre}}</br>
+</sxh>
+Así se repetirían el tag ''<strong>''  , el texto  y el tag ''<br>'' tantas veces como elementos hay en el array.
+Para delimitar el tag de inicio de la repetición se usa la directiva ''ng-repeat-start'' que funciona exactamente igual que ''ng-repeat'' y para delimitar el tag de fin de la repetición se usa la directiva ''ng-repeat-end''
+===== Claves primarias =====
+Por defecto, si cambiamos el array de datos ,AngularJS automáticamente borrará todos los tag y los volverá a crear con todos los datos. Si hay muchos datos éso suele ser poco eficiente. Para paliarlo, AngularJS permite que le digamos qué columna es una clave única de nuestros objeto y así él puede optimizar el proceso.
+La forma de hacerlo es añadir el texto ''track by'' y la propiedad que actúa como clave primaria.
+La directiva entonces quedaría así:
+<sxh html>
+<tr ng-repeat="provincia in provincias track by provincia.idProvincia">
+</sxh>
+Tras el texto ''track by'' se pone el nombre de la variable y luego la columna que es clave única.
+===== Ejemplo =====
+{{url>http://embed.plnkr.co/aUnQGCcjB0CswI0AfAVx}}
+===== Referencias =====
+  * [[https://docs.angularjs.org/api/ng/directive/ngRepeat|ng-repeat]]

unidades/04_masdirectivas/04_ngrepeat.1406808091.txt.gz · Última modificación: 2014/07/31 14:01 por admin

Ir hasta arriba