View Source   Improve this doc

ion-list
Delegate: $ionicListDelegate

See the Pen by Ionic (@ionic) on CodePen.

The List is a widely used interface element in almost any mobile app, and can include content ranging from basic text all the way to buttons, toggles, icons, and thumbnails.

Both the list, which contains items, and the list items themselves can be any HTML element. The containing element requires the list class and each list item requires the item class.

However, using the ionList and ionItem directives make it easy to support various interaction modes such as swipe to edit, drag to reorder, and removing items.

Related: ionItem, ionOptionButton ionReorderButton, ionDeleteButton, list CSS documentation.

Usage

Basic Usage:

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

Advanced Usage: Thumbnails, Delete buttons, Reordering, Swiping

<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)">
      Share
    </ion-option-button>
    <ion-option-button class="button-info"
                       ng-click="edit(item)">
      Edit
    </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>

app.controller('MyCtrl', function($scope) {
 $scope.shouldShowDelete = false;
 $scope.shouldShowReorder = false;
 $scope.listCanSwipe = true
});

API

Attr Type Details
delegate-handle
(optional)
 string

The handle used to identify this list with $ionicListDelegate.
type
(optional)
 string

The type of list to use (list-inset or card)
show-delete
(optional)
 boolean

Whether the delete buttons for the items in the list are currently shown or hidden.
show-reorder
(optional)
 boolean

Whether the reorder buttons for the items in the list are currently shown or hidden.
can-swipe
(optional)
 boolean

Whether the items in the list are allowed to be swiped to reveal option buttons. Default: true.