AngularJS => ng-repetir

Introducción

La directiva ngRepeat una instancia de una plantilla una vez por elemento de una colección. La colección debe ser una matriz o un objeto. Cada instancia de plantilla tiene su propio ámbito, donde la variable de bucle dada se establece en el elemento de colección actual, y $index se establece en el índice o clave del elemento.

Sintaxis

<element ng-repeat="expression"></element>
<div ng-repeat="(key, value) in myObj">...</div>
<div ng-repeat="variable in expression">...</div>

Parámetros

Variable	Detalles
`$index`	número iterador de desplazamiento del elemento repetido (0..length-1)
`$first`	boolean true si el elemento repetido es el primero en el iterador.
`$middle`	boolean true si el elemento repetido está entre el primero y el último en el iterador.
`$last`	boolean true si el elemento repetido es el último en el iterador.
`$even`	boolean true si la posición del iterador `$index` es par (en caso contrario, false).
`$odd`	boolean true si la posición del iterador `$index` es impar (en caso contrario, false).

Observaciones

AngularJS proporciona estos parámetros como variables especiales que están disponibles en la expresión ng-repeat y en cualquier lugar dentro de la etiqueta HTML en la que vive ng-repeat.

Iterando sobre las propiedades del objeto.

<div ng-repeat="(key, value) in myObj"> ... </div>

Por ejemplo

<div ng-repeat="n in [42, 42, 43, 43]">
  {{n}}
</div>

Seguimiento y duplicados

ngRepeat utiliza $ watchCollection para detectar cambios en la colección. Cuando ocurre un cambio, ngRepeat realiza los cambios correspondientes en el DOM:

Cuando se agrega un elemento, se agrega una nueva instancia de la plantilla al DOM.
Cuando se elimina un elemento, su instancia de plantilla se elimina del DOM.
Cuando los artículos se reordenan, sus respectivas plantillas se reordenan en el DOM.

Duplicados

track by cualquier lista que pueda incluir valores duplicados.
track by también acelera los cambios de lista significativamente.
Si no usa la función de track by en este caso, obtendrá el error: [ngRepeat:dupes]

$scope.numbers = ['1','1','2','3','4'];

<ul>
  <li ng-repeat="n in numbers track by $index">
    {{n}}
  </li>
</ul>

ng-repeat-start + ng-repeat-end

AngularJS 1.2 ng-repeat maneja múltiples elementos con ng-repeat-start y ng-repeat-end :

// table items
$scope.tableItems = [
    {
        row1: 'Item 1: Row 1',
        row2: 'Item 1: Row 2'
    },
    {
        row1: 'Item 2: Row 1',
        row2: 'Item 2: Row 2'
    }
];

// template
<table>
    <th>
        <td>Items</td>
    </th>
    <tr ng-repeat-start="item in tableItems">
        <td ng-bind="item.row1"></td>
    </tr>
    <tr ng-repeat-end>
        <td ng-bind="item.row2"></td>
    </tr>
</table>

Salida:

Artículos
Artículo 1: Fila 1
Artículo 1: Fila 2
Artículo 2: Fila 1
Artículo 2: Fila 2

Modified text is an extract of the original Stack Overflow Documentation

Licenciado bajo CC BY-SA 3.0

No afiliado a Stack Overflow

AngularJS
ng-repetir

Buscar..