angularjs的collection-repeat用法

http://ionicframework.com/docs/api/directive/collectionRepeat/

首先摘录原文：

collection-repeat

See the Pen byIonic(@ionic) onCodePen.

collection-repeatallows an app to show huge lists of items much more performantly thanng-repeat.

It renders into the DOM only as many items as are currently visible.

This means that on a phone screen that can fit eight items,only the eight items matching the current scroll position will be rendered.

The Basics:

• The data given to collection-repeat must be an array.
• If theitem-heightanditem-widthattributes are not supplied,it will be assumed that every item in the list has the same dimensions as the first item.
• Don’t use angular one-time binding (::) with collection-repeat. The scope of each item is assigned new data and re-digested as you scroll. Bindings need to update,and one-time bindings won’t.

Performance Tips:

• The iOS webview has a performance bottleneck when switching out<img src>attributes. To increase performance of images on iOS,cache your images in advance and,if possible,lower the number of unique images. We’re working ona solution.

Usage

Basic Item List (codepen)

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

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