AngularJSng-repeat

Introduction

The ngRepeat directive instantiates a template once per item from a collection. The collection must be an array or an object. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $index is set to the item index or key.

Syntax

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

Parameters

VariableDetails
$indexnumber iterator offset of the repeated element (0..length-1)
$firstboolean true if the repeated element is first in the iterator.
$middleboolean true if the repeated element is between the first and last in the iterator.
$lastboolean true if the repeated element is last in the iterator.
$evenboolean true if the iterator position $index is even (otherwise false).
$oddboolean true if the iterator position $index is odd (otherwise false).

Remarks

AngularJS provides these parameters as special variables that are available in the ng-repeat expression and anywhere inside of the HTML tag on which the ng-repeat lives.

Iterating over object properties

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

For example

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

Tracking and Duplicates

ngRepeat uses $watchCollection to detect changes in the collection. When a change happens, ngRepeat then makes the corresponding changes to the DOM:

  • When an item is added, a new instance of the template is added to the DOM.
  • When an item is removed, its template instance is removed from the DOM.
  • When items are reordered, their respective templates are reordered in the DOM.

Duplicates

  • track by for any list that may include duplicate values.
  • track by also speeds up list changes significantly.
  • If you don't use track by in this case, you get the 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 handle multiple elements with ng-repeat-start and 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>

Output:

Items
Item 1: Row 1
Item 1: Row 2
Item 2: Row 1
Item 2: Row 2