Diferencias

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

--- unidades:04_masdirectivas:04_ngrepeat [2014/07/31 15:52] – 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 aqui solo veremos arrays)) de datos de ''$scope''. Su utilidad es para hacer tablas o similar, es decir para estructuras que se repiten.
+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.
@@ Línea 51: / Línea 51: @@
 </sxh>
-  * Linea 9: La directiva ''ng-repeat'' hará que se repita el tag en la 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.
+  * 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''.
@@ Línea 66: / Línea 66: @@
 Todas estas variable son muy útiles para cambiar el estilo de la filas.
-Podemos modificar el ejemplo anterior de forma que las filas pares sena de fondo blanco y la impares de fondo amarillo:
+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 retornará "white" y cuando sea ''false'' se retornará ''yellow''.
+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:
@@ Línea 92: / Línea 96: @@
   </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]]