ion-list

授权: $ionicListDelegate

列表是一个应用广泛在几乎所有移动app中的界面元素，可以包含的内容范围从基本文字到按钮，开关，图标和缩略图在内所有内容。

包含列表项的列表以及列表项自身都可以是任何的HTML元素。容器元素需要list类，并且每个列表项需要item类。

然而，使用ionList和ionItem可以很容易的支持各种交互方式，比如，滑动编辑，拖动排序，以及删除项。

相关阅读: ionItem, ionOptionButton ionReorderButton, ionDeleteButton, list CSS documentation.

用法

基本用法:

<ion-list>
  <ion-item ng-repeat="item in items">
    Hello, {{item}}!
  </ion-item>
</ion-list>

高级用法: 缩略图，删除按钮，重新排序，滑动

<ion-list ng-controller="MyCtrl"
          show-delete="shouldShowDelete"
          show-reorder="shouldShowReorder"
          can-swipe="listCanSwipe">
  <ion-item ng-repeat="item in items"
            class="item-thumbnail-left">

    <img ng-src="{{item.img}}">
    <h2>{{item.title}}</h2>
    <p>{{item.description}}</p>
    <ion-option-button class="button-positive"
                       ng-click="share(item)">
      分享
    </ion-option-button>
    <ion-option-button class="button-info"
                       ng-click="edit(item)">
      编辑
    </ion-option-button>
    <ion-delete-button class="ion-minus-circled"
                       ng-click="items.splice($index, 1)">
    </ion-delete-button>
    <ion-reorder-button class="ion-navicon"
                        on-reorder="reorderItem(item, $fromIndex, $toIndex)">
    </ion-reorder-button>

  </ion-item>
</ion-list>

API