DevTut

# ng-repeat

# 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

# 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 (opens new window) 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>

    # Syntax

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

    # Parameters

    Variable Details
    $index number iterator offset of the repeated element (0..length-1)
    $first boolean true if the repeated element is first in the iterator.
    $middle boolean true if the repeated element is between the first and last in the iterator.
    $last boolean true if the repeated element is last in the iterator.
    $even boolean true if the iterator position $index is even (otherwise false).
    $odd boolean 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.

    ← ng-style →