Repeater

import { Repeater } from 'cx/widgets';

Repeater renders the content of each record from the assigned collection. Within Repeater, use the $record alias to access the record data. Element index is available by using the $index alias.

You checked 0 item(s).

Controller Repeater

<Repeater records-bind="intro.core.items">
    <Checkbox value-bind="$record.checked" text-bind="$record.text" />
    <br/>
</Repeater>

You checked <Text value-expr="{intro.core.items}.filter(a => a.checked).length" /> item(s).

Copied!Cx Fiddle

Sorting

If sortField is set, the collection will be sorted before output. By default, Repeater maintains the order of elements in the collection. Here is a modified version of the previous example with elements arranged in descending order:

You checked 0 item(s).

Repeater

<Repeater 
    records-bind="intro.core.items" 
    sortField="text"
    sortDirection="DESC"    
>
    <Checkbox value-bind="$record.checked" text-bind="$record.text" />
    <br/>
</Repeater>

You checked <Text value-expr='{intro.core.items}.filter(a => a.checked).length' /> item(s).

Copied!Cx Fiddle

Nesting Repeater and usage of non-default aliases

Sometimes it is useful to change the default record and index aliases ($record and $index), e.g. when nesting one Repeater inside another. This can be done by setting the recordAlias and indexAlias attributes.

Account ID: 12345
0 - send $250 to 12346
1 - receive $100 from 12347
2 - send $150 to 12346

Account ID: 12346
0 - receive $250 from 12345
1 - receive $150 from 12345

Controller Repeater

<Repeater
    records-bind="bank.transactions"
    recordAlias="account"
>
    <Text tpl="Account ID: {account.accountId}" />
    <br/>
    <Repeater
        records-bind="account.transactions"
        recordAlias="transaction"
        indexAlias="transactionIndex"
    >
        <Text tpl="{transactionIndex} - {transaction.action} ${transaction.amount} " />
        <Text tpl="to {transaction.to}" if-expr="{transaction.action} === 'send'" />
        <Text tpl="from {transaction.from}" if-expr="{transaction.action} === 'receive'" />
        <br />
    </Repeater>
    <br />
</Repeater>

Copied!Cx Fiddle

Configuration

Property	Description	Type
indexAlias indexName	Alias used to expose record index. Defaults to `$index`.	string
recordAlias recordName	Alias used to expose record data. Defaults to `$record`.	string
records	An array of records to be shown.	array
sortDirection	A binding used to store the sort direction. Available only if `sorters` are not used. Possible values are `"ASC"` and `"DESC"`. Defaults to `"ASC"`.	string
sortField	A binding used to store the name of the field used for sorting the collection. Available only if `sorters` are not used.	string
sorters	A binding used to store the sorting order list. This should be an array of objects with `field` and `direction` properties (equivalent to `sortField` and `sortDirection` properties).	array
onTrackMappedRecords	Callback function to track and retrieve displayed records. Accepts new records as a first argument. If onCreateFilter callback is defined, filtered records can be retrieved using this callback.	function
sortOptions	Options for data sorting. See Intl.Collator options for more info.	record

Documentation

Repeater