An Ionic list directive
Created
September 13, 2014 20:13
-
-
Save four2theizz0/12abcb58449a66b44401 to your computer and use it in GitHub Desktop.
A Pen by Ionic.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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="//code.ionicframework.com/1.0.0-beta.12/css/ionic.css" rel="stylesheet"> | |
<script src="//code.ionicframework.com/1.0.0-beta.12/js/ionic.bundle.js"></script> | |
</head> | |
<body ng-controller="MyCtrl"> | |
<ion-header-bar class="bar-positive"> | |
<div class="buttons"> | |
<button class="button button-icon icon ion-ios7-minus-outline" | |
ng-click="data.showDelete = !data.showDelete; data.showReorder = false"></button> | |
<h1 class="title">Ionic Delete/Option Buttons</h1> | |
<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 --> | |
<ion-list show-delete="data.showDelete" show-reorder="data.showReorder"> | |
<ion-item ng-repeat="item in items" | |
item="item" | |
href="#/item/{{item.id}}"> | |
Item {{ item.id }} | |
<ion-delete-button class="ion-minus-circled" | |
ng-click="onItemDelete(item)"> | |
</ion-delete-button> | |
<ion-option-button class="button-assertive" | |
ng-click="edit(item)"> | |
Edit | |
</ion-option-button> | |
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 } | |
]; | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
cursor: url('http://ionicframework.com/img/finger.png'), auto; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment