collection-repeat
作者:本站编辑 发布时间:2015-11-24 来源:本站原创
点击数:
该指令只渲染屏幕可见区域的列表。因此如果你有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 | 表达式 | 重复元素的高度。可以是一个数字（以像素为单位）或一个百分百。 |