davidmaogomezz/Ionic list with delete.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 Delete with Toggle</title>

    <link href="//code.ionicframework.com/1.0.0-beta.14/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/1.0.0-beta.14/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="showDelete = !showDelete"></button>
        <h1 class="title">Ionic Delete with Toggle</h1>
      </div>
    </ion-header-bar>

    <ion-content>
      <ion-list show-delete="showDelete"
                class="list list-editing">
        <ion-item ng-repeat="item in items"
                  class="item-icon-left item-button-right item-toggle item-icon-right">
          <ion-delete-button class="ion-minus-circled" ng-click="deleteItem(item)"></ion-delete-button>
          <i class="icon ion-clock"></i>
          <h2 class="padding">Item {{ item.id }}</h2>
          <div class="toggle" ng-if="!showDelete">
            <input type="checkbox">
            <div class="track">
              <div class="handle"></div>
            </div>
          </div>
          <i class="icon ion-chevron-right icon-accessory" ng-if="showDelete" style="right: 64px;"></i>
        </ion-item>
      </ion-list>
    </ion-content>

  </body>
</html>

## Ionic list with delete.markdown

      
    Raw
  

              Ionic list with delete.markdown
            
          
    Ionic list with delete

Ionic list with delete and edit. When clicking to show the delete the toggle turns into an arrow.
Created to help with this bug: http://forum.ionicframework.com/t/delete-edit-like-apple-clock-app/16104
A Pen by Brandy Carney on CodePen.
License.

  
## script.js
angular.module('ionicApp', ['ionic'])

.controller('MyCtrl', function($scope) {
  $scope.deleteItem = 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;
}

list-editing .toggle {
	top:20px;
}

.activate-link {
	pointer-events: initial;
}
	<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 Delete with Toggle</title>

	<link href="//code.ionicframework.com/1.0.0-beta.14/css/ionic.css" rel="stylesheet">
	<script src="//code.ionicframework.com/1.0.0-beta.14/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="showDelete = !showDelete"></button>
	<h1 class="title">Ionic Delete with Toggle</h1>
	</div>
	</ion-header-bar>

	<ion-content>
	<ion-list show-delete="showDelete"
	class="list list-editing">
	<ion-item ng-repeat="item in items"
	class="item-icon-left item-button-right item-toggle item-icon-right">
	<ion-delete-button class="ion-minus-circled" ng-click="deleteItem(item)"></ion-delete-button>
	<i class="icon ion-clock"></i>
	<h2 class="padding">Item {{ item.id }}</h2>
	<div class="toggle" ng-if="!showDelete">
	<input type="checkbox">
	<div class="track">
	<div class="handle"></div>
	</div>
	</div>
	<i class="icon ion-chevron-right icon-accessory" ng-if="showDelete" style="right: 64px;"></i>
	</ion-item>
	</ion-list>
	</ion-content>

	</body>
	</html>
	angular.module('ionicApp', ['ionic'])

	.controller('MyCtrl', function($scope) {
	$scope.deleteItem = 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;
	}

	list-editing .toggle {
	top:20px;
	}

	.activate-link {
	pointer-events: initial;
	}