❮ Ionic List Ionic Tab ❯

Ionic List Operations

The list is a widely used interface element in almost all mobile apps. The ionList and ionItem directives support a variety of interaction modes, such as removing an item, drag-to-reorder, swipe-to-edit, and more.

Usage

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

Advanced Usage: Thumbnails, Delete Buttons, Reordering, Swiping

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

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

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

API

Attribute	Type	Details
delegate-handle (optional)	String	The handle defines the list with $ionicListDelegate.
show-delete (optional)	Boolean	Whether the delete button for the list item is currently shown or hidden.
show-reorder (optional)	Boolean	Whether the reorder button for the list item is currently shown or hidden.
can-swipe (optional)	Boolean	Whether the list item is allowed to swipe to show option buttons. Default: true.

Example

HTML Code:

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Ionic List Directive</title>

    <link href="http://www.tutorialpro.org/static/ionic/css/ionic.min.css" rel="stylesheet">
    <script src="http://www.tutorialpro.org/static/ionic/js/ionic.bundle.min.js"></script>
  </head>

  <body ng-controller="MyCtrl">

    &lt;ion-header-bar class="bar-positive">
      <div class="buttons">
        &lt;button class="button button-icon icon ion-ios-minus-outline"

<button ng-click="data.showDelete = !data.showDelete; data.showReorder = false"></button>
</div>
<h1 class="title">Ionic Delete/Option Buttons</h1>
<div class="buttons">
  <button class="button" ng-click="data.showDelete = false; data.showReorder = !data.showReorder">
      Reorder
  </button>
</div>
</ion-header-bar>

<ion-content>

  <!-- The list directive is great, but be sure to also checkout the collection repeat directive when scrolling through large lists -->

  &lt;ion-list show-delete="data.showDelete" show-reorder="data.showReorder">

    &lt;ion-item ng-repeat="item in items" 
              item="item"
              href="#/item/{{item.id}}" class="item-remove-animate">
      Item {{ item.id }}
      &lt;ion-delete-button class="ion-minus-circled" 
                         ng-click="onItemDelete(item)">
      </ion-delete-button>
      &lt;ion-option-button class="button-assertive"
                         ng-click="edit(item)">
        Edit
      </ion-option-button>
      &lt;ion-option-button class="button-calm"
                         ng-click="share(item)">
        Share
      </ion-option-button>
      <ion-reorder-button class="ion-navicon" on-reorder="moveItem(item, $fromIndex, $toIndex)"></ion-reorder-button>
    </ion-item>

  </ion-list>

</ion-content>

</body>
</html>

CSS Code

body {
  cursor: url('http://www.tutorialpro.org/try/demo_source/finger.png'), auto;
}

JavaScript Code

angular.module('ionicApp', ['ionic'])

.controller('MyCtrl', function($scope) {

  $scope.data = {
    showDelete: false
  };

  $scope.edit = function(item) {
    alert('Edit Item: ' + item.id);
  };
  $scope.share = function(item) {
    alert('Share Item: ' + item.id);
  };

  $scope.moveItem = function(item, fromIndex, toIndex) {
    $scope.items.splice(fromIndex, 1);
    $scope.items.splice(toIndex, 0, item);
  };

  $scope.onItemDelete = function(item) {

$scope.items.splice($scope.items.indexOf(item), 1);
};

$scope.items = [
  { id: 0 },
  { id: 1 },
  { id: 2 },
  { id: 3 },
  { id: 4 },
  { id: 5 },
  { id: 6 },
  { id: 7 },
  { id: 8 },
  { id: 9 },
  { id: 10 },
  { id: 11 },
  { id: 12 },
  { id: 13 },
  { id: 14 },
  { id: 15 },
  { id: 16 },
  { id: 17 },
  { id: 18 },
  { id: 19 },
  { id: 20 },
  { id: 21 },
  { id: 22 },
  { id: 23 },
  { id: 24 },
  { id: 25 },
  { id: 26 },
  { id: 27 },
  { id: 28 },
  { id: 29 },
  { id: 30 },
  { id: 31 },
  { id: 32 },
  { id: 33 },
  { id: 34 },
  { id: 35 },
  { id: 36 },
  { id: 37 },
  { id: 38 },
  { id: 39 },
  { id: 40 },
  { id: 41 },
  { id: 42 },
  { id: 43 },
  { id: 44 },
  { id: 45 },
  { id: 46 },
  { id: 47 },
  { id: 48 },
  { id: 49 },
  { id: 50 }
];

Try it »

❮ Ionic List Ionic Tab ❯