oottoohh/List: Nightly.markdown

## index.html
<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/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/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-ios-minus-outline"
          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 -->

      <ion-list show-delete="data.showDelete" show-reorder="data.showReorder">

        <ion-item ng-repeat="item in items"
                  item="item"
                  href="#/item/{{item.id}}" class="item-remove-animate">
          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>

## List: Nightly.markdown

      
    Raw
  

              List: Nightly.markdown
            
          
    List: Nightly

An Ionic list directive
Forked from Ionic's Pen Thumbnail List: Nightly.
Forked from Ionic's Pen Thumbnail List: Nightly.
A Pen by ottoh hidayatullah on CodePen.
License.

  
## script.js
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 }
  ];

});

## style.css
body {
  cursor: url('http://ionicframework.com/img/finger.png'), auto;
}
	<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/nightly/css/ionic.css" rel="stylesheet">
	<script src="//code.ionicframework.com/nightly/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-ios-minus-outline"
	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 -->

	<ion-list show-delete="data.showDelete" show-reorder="data.showReorder">

	<ion-item ng-repeat="item in items"
	item="item"
	href="#/item/{{item.id}}" class="item-remove-animate">
	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>
	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 }
	];

	});
	body {
	cursor: url('http://ionicframework.com/img/finger.png'), auto;
	}