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 16:12]
admin [Claves primarias]
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 94: Línea 98:
  
 Aquí hemos añadido una tercera columna para mostrar la variable ''​$index''​. Aquí hemos añadido una tercera columna para mostrar la variable ''​$index''​.
- 
 ===== Repetir varias etiquetas ===== ===== Repetir varias etiquetas =====
-''​ng-repeat'' ​solo permite repetir un único tag HTML y su contenido, pero ¿como hacemos para 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:+''​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> <sxh html>
Línea 105: Línea 108:
 Así se repetirían el tag ''<​strong>'' ​ , el texto  y el tag ''<​br>''​ tantas veces como elementos hay en el array. 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 ​de usa la directiva ''​ng-repeat-end''​+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 ===== ===== 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 eso suele ser poco eficiente. Para paliarlo, AngularJS permite que le digamos ​que columna es una clave única de nuestros objeto y así él puede optimizar el proceso.+Por defectosi 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 forma de hacerlo es añadir el texto ''​track by''​ y la propiedad que actúa como clave primaria. ​
Línea 117: Línea 120:
 </​sxh>​ </​sxh>​
  
-Tras el texto ''​track by''​ se pone el nobmre ​de la variable y luego la columna que es clave única+Tras el texto ''​track by''​ se pone el nombre ​de la variable y luego la columna que es clave única.
  
 ===== Ejemplo ===== ===== Ejemplo =====
unidades/04_masdirectivas/04_ngrepeat.1406815955.txt.gz · Última modificación: 2014/07/31 16:12 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