collection-repeat позволяет приложению отображать списки, содержащие огромное количество пунктов. При этом действует более эффективно, чем ng-repeat.

В DOM передаются только те пункты, которые видны в данный момент.

Это означает, что на экране телефона, где могут уместиться только восемь пунктов списка, будут в данном виде отображения видны восемь пунктов списка (без применения прокрутки).

Основы:

  • Данные, передающиеся в collection-repeat, должны представлять собой массив.
  • Если не предоставляются атрибуты item-height и item-width, будет сделано допущение, что каждый пункт в списке имеет точно такие же размеры, как и самый первый его пункт.
  • Не используйте с collection-repeat одноразовую привязку Angular (::). По мере прокрутки области видимости каждого пункта из списка присваиваются новые данные, и происходит процесс переклассификации. Привязки нуждаются в обновлениях, а одноразовым привязкам обновление не нужно.

Возможности повышения производительности:

  • Узкое место производительности веб-представления в iOS наблюдается при отключении атрибутов <img src>.
    Чтобы увеличить эффективность работы с изображениями в iOS, заранее поместите изображения в кэш и, если возможно, уменьшите число уникальных изображений. 

Usage

Basic Item List (codepen)

<ion-content>
  <ion-item collection-repeat="item in items">
    {{item}}
  </ion-item>
</ion-content>

Grid of Images (codepen)

<ion-content>
  <img collection-repeat="photo in photos"
    item-width="33%"
    item-height="200px"
    ng-src="{{photo.url}}">
</ion-content>

Horizontal Scroller, Dynamic Item Width (codepen)

<ion-content>
  <h2>Available Kittens:</h2>
  <ion-scroll direction="x" class="available-scroller">
    <div class="photo" collection-repeat="photo in main.photos"
       item-height="250" item-width="photo.width + 30">
       <img ng-src="{{photo.src}}">
    </div>
  </ion-scroll>
</ion-content>

API

Атрибут

Тип

Описание

collection-repeat

(expression)

Выражение, показывающее как нумеровать коллекцию, по формату  переменная в выражении – где переменная задается пользователем и является цикловой переменной, а выражение - это выражение области видимости, дающее возможность нумеровать коллекцию. Например: album in artist.albums или album in artist.albums | orderBy:'name'.

item-width

(необязательный)

(expression)

Ширина повторяемого элемента. Выражение должно возвращать число (пикселей) или проценты. По умолчанию задается точно такая же ширина, как у первого пункта в списке. (ранее это называлось collection-item-width)

item-height

(необязательный)

(expression)

Высота повторяемого элемента. Выражение должно возвращать число (пикселей) или проценты. По умолчанию задается точно такая же высота, как у первого пункта в списке. (ранее это называлось collection-item-height)

item-render-buffer

(необязательный)

(number)

Число пунктов, которые нужно загрузить до и после видимых пунктов в списке. По умолчанию: 3. Подсказка: если у вас много изображений для предварительной загрузки, задайте число побольше, но не слишком большое, иначе начнется потеря производительности.

force-refresh-images

(необязательный)

(boolean)

Заставляет изображения обновляться, когда вы осуществляете прокрутку. Это решает проблему там, где элемент взаимно заменяется при скроллинге: изображение все равно имеет старый scr в то время, как загружается новый scr. Установка значения на true приводит к небольшой потере производительности.