Diferencias

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

Enlace a la vista de comparación

unidades:04_masdirectivas:04_ngrepeat [2014/07/31 14:01]
admin creado
unidades:04_masdirectivas:04_ngrepeat [2014/08/29 22:37] (actual)
admin
Línea 1: Línea 1:
-====== ng-repeat ======+====== ​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.1406808084.txt.gz · Última modificación: 2014/07/31 14:01 por admin
Ir hasta arriba
CC Attribution-Share Alike 3.0 Unported
chimeric.de = chi`s home Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0