The
ngRepeat
directive is really useful to iterate over arrays and objects. It can be used with any kind of element such as the rows of a table, the elements of a list, and even the options of select.
We must provide a special repeat expression that describes the array to iterate over the variable that will hold each item in the iteration. The most basic expression format allows us to iterate over an array, attributing each element to a variable:
Variable in array
It's also possible to use a slightly different expression to iterate over objects:
(key, value) in object
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr ng-repeat = "x in employees">
<td>{{ x.name }}</td>
<td>{{ x.age }}</td>
</tr>
</table>
Beyond iterating, we can identify which is the first or the last element, what is its index number, and many other things. This can be achieved by using the following properties:
Variable | Type | Details |
---|
$index | Number | Number of the element |
$first | Boolean | This is true if the element is the first one |
$last | Boolean | This is true if the element is the last one |
$middle | Boolean | This is true if the element is in the middle |
$even | Boolean | This is true if the element is even |
$odd | Boolean | This is true if the element is odd |