ionic list基础使用，适用于快速上手

今天这篇文章相当简单，就是一些关于list 、ng-repeat的基本使用。

首先来说，list就是一个列表，没什么好说的，ionic也已经定义了一些基本的样式（包括item）。

所以在这里着重先讲解一下ng-repeat，它的作用简单来说就是遍历对象，循环DOM。

使用方式:

<div ng-repeat="(key, value) in myObj"> ... </div>

一般使用方式：

<div ng-repeat="object in Array"> ... </div>

当数组中有两个元素完全相同时，会报错，这时候需要使用 track by 后面可以跟$index，也可以跟一个function

$index 返回当前元素在数组中的下标。

$first 是否为第一个元素

$middle 是否为中间元素（既不是第一个，也不是最后一个）


$last  是否为最后一个元素

$even  下标是否是偶数

$odd   下标是否是奇数

<div ng-repeat="n in [42, 42, 43, 43] track by $index">  {{n}}</div>

<div ng-repeat="n in [42, 42, 43, 43] track by myTrackingFunction(n)">  {{n}}</div>

track by 是用来排序的，所以我们可以排序时使用：

<ion-list>  <ion-item ng-repeat="item in [{name:'zhangsan',age:29},{name:'zhangsan',age:30},{name:'lisi',age:20},{name:'wangwu',age:21},{name:'maliu',age:32}]track by item.age " >    <!--list 数组名 item 单个数组元素 $index当前元素下标-->    {{item.name}} <span >{{item.age}}</span>  </ion-item></ion-list>注意：track by 必须放置在最后面。使用ng-repeat 循环的是一个标签中的东西，有时候需要循环好几个标签，那么就需要
ng-repeat-start="item in items"  
ng-repeat-end
小示例：
<ion-list>  <ion-item ng-repeat="item in [{name:'zhangsan',age:29},{name:'zhangsan',age:30},{name:'lisi',age:20},{name:'wangwu',age:21},{name:'maliu',age:32}]">    <!--list 数组名 item 单个数组元素 $index当前元素下标-->    {{item.name}} <span >{{item.age}}</span>  </ion-item>  <ion-item>    其他标签  </ion-item>  <ion-item>body</ion-item></ion-list>
运行结果示例：


<ion-list>  <ion-item ng-repeat-start="item in [{name:'zhangsan',age:29},{name:'zhangsan',age:30},{name:'lisi',age:20},{name:'wangwu',age:21},{name:'maliu',age:32}]">    <!--list 数组名 item 单个数组元素 $index当前元素下标-->    {{item.name}} <span >{{item.age}}</span>  </ion-item>  <ion-item ng-repeat-end>body</ion-item></ion-list>
运行结果示例：

通过上面的对比示例可以看出，后面的这一种方法将下面两个标签也进行了循环。

对于列表，很多时候我们需要过滤出其中的某一些项，这时候我们就用到了filter过滤器。

<div >  <input class="item-input" placeholder="搜索框" ng-model="seach.age">  <!--指定对age属性进行检索--></div><ion-list>  <ion-item ng-repeat="item in list |filter:seach ">    <!--list 数组名 item 单个数组元素 $index当前元素下标-->    {{item.name}} <span >{{item.age}}</span>  </ion-item></ion-list>运行结果示例：当输入2，age中不包含2的将被过滤

很多时候当状态不同时，为了区分，页面样式也不会相同，这一点在列表中体现相当多，比如：数据状态为已提交、未提交、已完成、已保存等等。所以我们也要根据状态值去改变对应item的样式。我们就用ng-class。最常用的方式，有两种：

第一种：提供一个可供选择的键值对对象，键为class的名称，值为判断条件（个人认为这个更加适合用于列表不同状态样式）。

定义好的css样式：

.style1{  color: #0a9dc7;}.style2{  color: red;}

html中使用方式（当item的age属性值大于20则用style1样式，当item的age属性值小于等于20则用style2样式）：

<ion-list>  <ion-item ng-repeat="item in list |filter:seach "  ng-click="ckxq(item)" ng-class="{'style1':item.age>20,'style2':item.age<=20}">    <!--list 数组名 item 单个数组元素 $index当前元素下标-->    {{item.name}} <span >{{item.age}}</span>  </ion-item></ion-list>

运行结果：

第二种：提供一个变量，通过给变量赋值，改变样式（个人认为这种适合于通过点击或其他事件触发后修改样式）。

这是官方文档的示例，本文不再赘述：

<input id="setbtn" type="button" value="set" ng-click="myVar='my-class'"><input id="clearbtn" type="button" value="clear" ng-click="myVar=''"><br><span class="base-class" ng-class="myVar">Sample Text</span>

最后，再说一个

collection-repeat

，这个指令跟ng-repeat用法相同，它算是高性能的ng-repeat，适合用于大数据量的列表，这是因为它只把可视区域的数据渲染到DOM上。