Repeat

Live demo 1 Live demo 2 Live demo 3

Renders child nodes for each value of the array.

Node name : repeat

Attributes

Attribute	Type	Required	Default value	Description
values	object[]	true		Array of values to iterate on.
item	string	false	Item	Alias for the array element being iterated on.
key	any	false		Key that identify an item. If the list is dynamic, identifying the item improves performance.
virtual	bool	false	false	Value indicating whether the iterated elements are virtualized. The value cannot be bound.

To use the array element being iterated on, use the variable $Item.

Warning

Directives can't be used on repeat node because this component is only intended for abstraction and not for display.

Warning

The repeat node changes the behavior of its descendant method buttons. When clicked, the method configured on these buttons will be called using the $Item as a parameter.

Examples

Simple repeat

<repeat values="@Fields.Products">
  <text>$Item.Name</text>
</repeat>

In child nodes, if an attribute expects a method, the iterated item will be passed as the first parameter of the method.

Repeat with alias

Also, you can set an alias for the array element being iterated on by setting the attribute item on the repeat node.

<repeat values="@Fields.Products" item="Product">
  <text>$Product.Name</text>
</repeat>

Nested repeat

It is possible to nest repeat nodes.

<repeat values="@Fields.Categories" item="Category">
  <text>$Category.Name</text>
  <repeat values="$Category.Products" item="Product">
    <text>$Product.Name</text>
  </repeat>
</repeat>

Repeat with dynamic source

If items can be added/inserted/modified/deleted, we recommend that you specify the key used to uniquely identify each item. This improves performances as it avoids having to re-render the whole list of items for each modification.

<repeat values="@Fields.Categories" key="$Item.Id">
  <text>$Item.Name</text>
</repeat>

Virtual repeat

If the source contains many items, we recommend setting the virtual attribute to true. This improves performance by rendering only the visible items instead of all of them.

Note that the repeat must be inside a vertically scrollable container with a fixed height.

<vertical-layout layout:height="fill">
  <repeat values="@Fields.Categories" virtual="true">
    <text>$Item.Name</text>
  </repeat>
</vertical-layout>