# angular.widget.@ng:repeat

Work in Progress This page is currently being revised. It might be incomplete or contain inaccuracies.

## Description

The `ng:repeat` widget instantiates a template once per item from a collection. The collection is enumerated with the `ng:repeat-index` attribute, starting from 0. 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.

Special properties are exposed on the local scope of each template instance, including:

- `$index` â `{number}` â iterator offset of the repeated element (0..length-1)
- `$position` â `{string}` â position of the repeated element in the iterator. One of:
  - `'first'`,
  - `'middle'`
  - `'last'`

Note: Although `ng:repeat` looks like a directive, it is actually an attribute widget.

## Usage

### In HTML Template Binding

    <ANY ng:repeat="repeat_expression">
       ...
    </ANY>

### Parameters

- `repeat_expression – {string} –`

  The expression indicating how to enumerate a collection. Two formats are currently supported:

  - `variable in expression` â where variable is the user defined loop variable and `expression` is a scope expression giving the collection to enumerate.

    For example: `track in cd.tracks`.

  - `(key, value) in expression` â where `key` and `value` can be any user defined identifiers, and `expression` is the scope expression giving the collection to enumerate.

    For example: `(name, age) in {'adam':10, 'amalie':12}`.

## Example

This example initializes the scope to a list of names and then uses `ng:repeat` to display every person:

            <div ng:init="friends = [{name:'John', age:25}, {name:'Mary', age:28}]">
              I have {{friends.length}} friends. They are:
              <ul>
                <li ng:repeat="friend in friends">
                  [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
                </li>
              </ul>
            </div>

             it('should check ng:repeat', function(){
               var r = using('.doc-example-live').repeater('ul li');
               expect(r.count()).toBe(2);
               expect(r.row(0)).toEqual(["1","John","25"]);
               expect(r.row(1)).toEqual(["2","Mary","28"]);
             });