al-repeat¶
Overview¶
- Directive for building lists.
- Input argument: specific kind of expression
Syntax¶
<li al-repeat="i in 10"></li>
<li al-repeat="item in list"></li>
<li al-repeat="item in list | filter"></li>
<li al-repeat="item in list | filter | filter"></li>
<li al-repeat="item in list | filter track by $index"></li>
<li al-repeat="item in list track by $id(item)"></li>
<li al-repeat="item in list track by item.id"></li>
<li al-repeat="item in list track by $index"></li>
<li al-repeat="item in list" al-controller="Controller"></li>
Bind to comment¶
<div>
<!-- directive: al-repeat item in list-->
<b>{{$index}}</b>
<i>{{item.kind}}</i>
{{item.name}}<br/>
<!-- /directive: al-repeat -->
</div>
Iteration over an object¶
<div al-repeat="(key,value) in user">
<div al-repeat="(key,value) in user orderBy:key,reverse">
<div al-repeat="(key,value) in user | some_filter orderBy:'key',reverse">
Description of attributes¶
- item - a name of variable for storing an element of list in child scope
- list - a source list
- filter - filters for the data
- track by - choose way to bind elements of the list to scope
al-repeat has not supported “store to” anymore, you can use filter “storeTo” instead, Example
Example¶
Example¶
<div al-init="friends = [{name:'John', age:25}, {name:'Mary', age:28}]">
I have {{friends.length}} friends. They are:
<ul>
<li al-repeat="friend in friends">
[{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
</li>
</ul>
</div>
Result¶
<div al-app al-init="friends = [{name:'John', age:25}, {name:'Mary', age:28}]">
I have {{friends.length}} friends. They are:
<ul>
<li al-repeat="friend in friends">
[{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
</li>
</ul>
</div>