al-repeat

Description

  • Directive for building lists.
  • Input argument: specific kind of expression

Examples of using

<ul>
    <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>
    <li al-repeat="item in list | filter store to filteredList"></li>
    <li al-repeat="item in list | filter track by $index store to filteredList"></li>
</ul>
<div>
  <!-- directive: al-repeat item in list-->
  <b>{{$index}}</b>
  <i>{{item.kind}}</i>
  {{item.name}}<br/>
  <!-- /directive: al-repeat -->
</div>

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
  • store to - store the resulting list to the scope

Sample

<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

I have {{friends.length}} friends. They are:
  • [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.

Examples

al-repeat

Описание

  • Используется для отображения списоков, на каждый новый элемент создается дочерний Scope, так же можно указать контроллер для дочернего Scope
  • Входной параметр: выражение

Примеры выражений

<ul>
    <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>
    <li al-repeat="item in list | filter store to filteredList"></li>
    <li al-repeat="item in list | filter track by $index store to filteredList"></li>
</ul>
<div>
  <!-- directive: al-repeat item in list-->
  <b>{{$index}}</b>
  <i>{{item.kind}}</i>
  {{item.name}}<br/>
  <!-- /directive: al-repeat -->
</div>

Описание параметров

  • item - имя переменной для хранения элемента списка в дочернем scope
  • list - исходный список
  • filter - применить фильтр к данным
  • track by - способ привязки элемента списка к scope
  • store to - сохранять результирующий список в scope

Пример

<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>

Результат

I have {{friends.length}} friends. They are:
  • [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.

Примеры

comments powered by Disqus