collection-repeat

collection-repeat 是一个允许你渲染数千项列表，并且性能几乎不会减弱的指令。

示例：

该指令只渲染屏幕可见区域的列表。因此如果你有1000条列表项目，只有10条呈现在你的屏幕上， collection-repeat 只会渲染当前滚动位置的十条DOM。

当使用collection-repeat时，请记住一下几点：

collection-repeat处理的数据必须是一个数组。
你必须明确的告诉该指令，在DOM中你的项使用是多大的指令属性。允许像素值或百分百（见下文）。
被渲染的元素将被绝对定位：确保你的CSS正常运行（见下文）。
保持重复的HTML元素尽可能的简单。当用户向下滚动时，元素会被延迟渲染。因此，你的元素越复杂，在用户滚动的过程中按需编译就越会导致“卡屏”。
在屏幕的每一行，你渲染的元素越多，滚动就越可能变慢。建议列表元素的栅格保持在3列以内。例如，如果你有一个图库只需把它们的宽度设置为33%。
每个 collection-repeat列表都会占据它的所有父滚动视图的空间。如果你想在一个页面上有多个列表，就把每个列表放在它自己的 ionScroll容器内。
你不应该在带有collection-repeat列表的ion-content或ion-scroll元素上使用ng-show 和 ng-hide指令。 ng-show 和 ng-hide 在内容样式上应用 css规则display: none，导致可见滚动视图内容的宽度和高度为0。因此，collection-repeat会渲染刚刚被取消隐藏的元素。

用法

基本用法（单行项）

注意两点：我们用 ng-style来设置项的高度以匹配我们的重复项的高度。此外，我们添加了一个css规则使我们的item拉伸以适应全屏（因为它是绝对定位的）。

<ion-content ng-controller="ContentCtrl">
  <div class="list">
    <div class="item my-item"
      collection-repeat="item in items"
      collection-item-width="'100%'"
      collection-item-height="getItemHeight(item, $index)"
      ng-style="{height: getItemHeight(item, $index)}">
      {{item}}
    </div>
  </div>
</div>

function ContentCtrl($scope) {
  $scope.items = [];
  for (var i = 0; i < 1000; i++) {
    $scope.items.push('Item ' + i);
  }

  $scope.getItemHeight = function(item, index) {
    //使索引项平均都有10px高，例如
    return (index % 2) === 0 ? 50 : 60;
  };
}

.my-item {
  left: 0;
  right: 0;
}

栅格用法（每行三项）

<ion-content>
  <div class="item item-avatar my-image-item"
    collection-repeat="image in images"
    collection-item-width="'33%'"
    collection-item-height="'33%'">
    <img ng-src="">
  </div>
</ion-content>

.my-image-item {
  height: 33%;
  width: 33%;
}

API

`collection-repeat`

表达式

该表达式表明如何枚举一个集合。当前支持一下格式：

变量表达式 – 其中变量是用户定义的循环变量，表达式是一个给出了集合进行枚举的范围表达式。

比如: album in artist.albums。
通过tracking_expression跟踪表达式变量 – 你也可以提供一个可选的跟踪功能可以将集合中的对象与DOM元素关联起来。如果没有指定跟踪功能，collection-repeat通过在集合中标识来关联元素。用一个以上的跟踪功能来解决同一个问题是错误的。（这意味着两个不同的对象被映射到同一个DOM元素上，那样是不行的。）过滤器应被应用到表达式，特定跟踪表达式之前。

比如: item in items等同于'item in items track by $id(item)'。这意味着DOM元素会被数组中标识的项关联。

比如: item in items track by $id(item)。在数组的每一项中一个内置的 $id()函数可以被用来分配一个唯一的 $$hashKey属性。然后这个属性作为一个关联DOM元素的关键，通过标识数组中的相应的项。在数组中移动同一个项与在DOM中移动DOM元素的方式一样。

比如: 当数据来自数据库时，item in items track by item.id是一个典型的模式。在这种情况下，对象标识并不重要。重要两个对象的id属性相同，那么它们被认为是等效的。

比如: item in items | filter:searchText track by item.id是一种模式，可用来在项上应用一个过滤器，与一个跟踪表达式相结合。

`collection-item-width`

表达式

重复元素的宽度。可以是一个数字（以像素为单位）或一个百分百。

`collection-item-height`

表达式

重复元素的高度。可以是一个数字（以像素为单位）或一个百分百。