angular.widget.@ng:repeat

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

Description

ng:repeat instantiates a template once per item from a collection. The collection is enumerated with 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.

There are special properties exposed on the local scope of each template instance:

$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' or 'last'.

NOTE: ng:repeat looks like a directive, but 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 than 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"]); });