YouTip LogoYouTip

Ionic Ion List

Title: Ionic List Operations | Tutorial\n\nLists are a widely used interface element in almost all mobile apps. The `ion-list` and `ion-item` directives also support a variety of interaction modes, such as removing items, dragging to reorder, swiping to edit, and more.\n\n### Usage\n\n Hello, {{item}}! \n### Advanced Usage: Thumbnails, Delete Buttons, Reordering, Swiping\n\n

{{item.title}}

{{item.description}}

Share Edit \n### API\n\n| Attribute | Type | Description |\n| --- | --- | --- |\n| delegate-handle _(Optional)_ | `String` | This handle defines the list for `$ionicListDelegate`. |\n| show-delete _(Optional)_ | `Boolean` | Indicates whether the delete button for list items is currently shown or hidden. |\n| show-reorder _(Optional)_ | `Boolean` | Indicates whether the reorder button for list items is currently shown or hidden. |\n| can-swipe _(Optional)_ | `Boolean` | Indicates whether list items are allowed to swipe to reveal option buttons. Default: true. |\n\n* * *\n\n## Example\n\n### HTML Code:\n\n Ionic List Directive

Ionic Delete/Option Buttons

Item {{ item.id }} Edit Share \n### CSS Code\n\nbody { cursor: url(''), auto;}\n### JavaScript Code\n\nangular.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 } ]; });
← Ionic IonicloadingIonic Ion Header Bar β†’