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 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 ====== ====== 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. Veamos un ejemplo para explicar su funcionamiento.
Línea 51: Línea 51:
 </​sxh>​ </​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 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 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. 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> <sxh>
 <tr ng-repeat="​provincia in provincias"​ style="​background-color:​{{$even?'​white':'​yellow'​}}">​ <tr ng-repeat="​provincia in provincias"​ style="​background-color:​{{$even?'​white':'​yellow'​}}">​
 </​sxh>​ </​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: Tambien podemos modificar el ejemplo haciendo que se muestre el Nº de fila en la que estamos:
Línea 92: Línea 96:
   </​table>​   </​table>​
 </​sxh>​ </​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.1406814725.txt.gz · Última modificación: 2014/07/31 15:52 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