前端框架OnsenUI学习之ng-repeat和ons-lazy-repeat介绍

1、ng-repeat属性可以用来显示相同布局的数据，对于给定的布局，通过一个数据集合的长度，来展示一个数据列表，作用有点类似于Android中的Adapter，但是ng-repeat缺点是不管数据源中有多少数据，只要执行到此处，都会一次性加载并渲染完所有数据，对于大数据来说，在渲染界面的时候会出现卡顿现象。

过滤：

<input type="search" ng-model="searchEndValue" placeholder="查询">

ng-repeat="endItem in endItems | filter : searchEndValue"

用法：

<ons-scroller style="flex: 1;">

<ons-list  modifier="inset">

        <ons-list-item modifier="tappable" class="item" ng-repeat="endItem in endItems">

                <div>{{endItem.cityName}}</div>

        </ons-list-item>

</ons-list>

</ons-scroller>

其中：endItems表示一个数据源集合，endItem表示每条数据。

2、<ons-lazy-repeat> 懒加载，类似于<ng-repeat> ，但是在加载性能上要优于<ng-repeat>。<ons-lazy-repeat> 在加载大量数据时不会出现卡顿现象，因为他的数据加载机制跟Adapter相同，具有创建和销毁特性，先预加载一定数据用于显示，对于不用数据项及时销毁掉。

用法：