<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/bear0064/pen/xwErad?depth=everything&order=popularity&page=29&q=ionic&show_forks=false" />
<style class="cp-pen-styles">/* Empty. Add your own CSS if you like */
.tabs-striped .tab-item {
margin-top: 1px;
font-size: 12px;
}
.tabs-striped .tab-item.tab-item-active,
.tabs-striped > .tabs {
text-transform: uppercase;
font-size: 12px;
font-weight: bold;
}
.nav-bar-tabs-top.hide ~ .view-container .tabs-top .tabs {
top: 35px !important;
}
.item-checkbox .checkbox {
width: 300px;
left: 0;
}
.item-complex .item-content, .item-radio .item-content {
position: relative;
z-index: 2;
padding: 16px 49px 16px 55px !important;
border: none;
background-color: #fff;
}
</style></head><body>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></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-app="starter" ng-controller="MyCtrl">
<ion-nav-bar class="has-tabs-top bar-assertive">
<ion-nav-buttons side="primary">
<button class="button button-icon-left icon ion-ios-minus-outline"
ng-click="data.showDelete = !data.showDelete; data.showReorder = false"></button>
<button class="button button-icon icon ion-navicon" ng-click="data.showDelete = false; data.showReorder = !data.showReorder"></button>
</ion-nav-buttons>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
<script id="templates/tabs.html" type="text/ng-template">
<ion-tabs class="tabs-striped tabs-top tabs-background-assertive tabs-color-light">
<!-- List One Tab -->
<ion-tab title="List One" icon-off="ion-ios-list-outline" icon-on="ion-ios-list" href="#/tab/list1">
<ion-nav-view name="tab-list1"></ion-nav-view>
</ion-tab>
<!-- List Two Tab -->
<ion-tab title="List Two" icon-off="ion-ios-list-outline" icon-on="ion-ios-list" href="#/tab/list2">
<ion-nav-view name="tab-list2"></ion-nav-view>
</ion-tab>
<!-- List Three Tab -->
<ion-tab title="List Three" icon-off="ion-ios-list-outline" icon-on="ion-ios-list" href="#/tab/list3">
<ion-nav-view name="tab-list3"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id="templates/tab-list1.html" type="text/ng-template">
<ion-view view-title="List One" ng-controller="list1Ctrl">
<ion-content ion-content has-header has-footer>
<!-- list1 and list1 items -->
<ion-list show-delete="data.showDelete" show-reorder="data.showReorder">
<ion-item ng-repeat="list1 in list1s track by $index" class="item item-checkbox item-button-right">
<label class="checkbox">
<input type="checkbox" ng-model="list1.done">
</label>
{{list1.text}}
<ion-delete-button class="ion-minus-circled"
ng-click="onItemDelete(list1)">
</ion-delete-button>
<ion-reorder-button class="ion-navicon" on-reorder="moveItem(list1, $fromIndex, $toIndex)"></ion-reorder-button>
</ion-item>
</ion-list>
</ion-content>
<form name="myForm" data-ng-submit="addTodo()">
<ion-footer-bar class="bar bar-footer item-input-inset">
<label class="item-input-wrapper">
<input name="myText" class="itemAdd" type="text" placeholder="Add Item" ng-model="todoText" ng-minlength="1" required>
</label>
<button ng-disabled="myForm.$invalid" class="button button-clear add">Add</button>
</ion-footer-bar>
</form>
</ion-view>
</script>
<script id="templates/tab-list2.html" type="text/ng-template">
<ion-view view-title="List Two" ng-controller="list2Ctrl">
<ion-content ion-content has-header has-footer>
<!-- list2 and list2 items -->
<ion-list show-delete="data.showDelete" show-reorder="data.showReorder">
<ion-item ng-repeat="list2 in list2s track by $index" class="item item-checkbox item-button-right">
<label class="checkbox">
<input type="checkbox" ng-model="list2.done">
</label>
{{list2.text}}
<ion-delete-button class="ion-minus-circled"
ng-click="onItemDelete(list2)">
</ion-delete-button>
<ion-reorder-button class="ion-navicon" on-reorder="moveItem(list2, $fromIndex, $toIndex)"></ion-reorder-button>
</ion-item>
</ion-list>
</ion-content>
<form name="myForm" data-ng-submit="addTodo()">
<ion-footer-bar class="bar bar-footer item-input-inset">
<label class="item-input-wrapper">
<input name="myText" class="itemAdd" type="text" placeholder="Add Item" ng-model="todoText" ng-minlength="1" required>
</label>
<button ng-disabled="myForm.$invalid" class="button button-clear add">Add</button>
</ion-footer-bar>
</form>
</ion-view>
</script>
<script id="templates/tab-list3.html" type="text/ng-template">
<ion-view view-title="List Three" ng-controller="list3Ctrl">
<ion-content ion-content has-header has-footer>
<!-- list3 and list3 items -->
<ion-list show-delete="data.showDelete" show-reorder="data.showReorder">
<ion-item ng-repeat="list3 in list3s track by $index" class="item item-checkbox item-button-right">
<label class="checkbox">
<input type="checkbox" ng-model="list3.done">
</label>
{{list3.text}}
<ion-delete-button class="ion-minus-circled"
ng-click="onItemDelete(list3)">
</ion-delete-button>
<ion-reorder-button class="ion-navicon" on-reorder="moveItem(list3, $fromIndex, $toIndex)"></ion-reorder-button>
</ion-item>
</ion-list>
</ion-content>
<form name="myForm" data-ng-submit="addTodo()">
<ion-footer-bar class="bar bar-footer item-input-inset">
<label class="item-input-wrapper">
<input name="myText" class="itemAdd" type="text" placeholder="Add Item" ng-model="todoText" ng-minlength="1" required>
</label>
<button ng-disabled="myForm.$invalid" class="button button-clear add">Add</button>
</ion-footer-bar>
</form>
</ion-view>
</script>
</body>
</html>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://codepen.io/bear0064/pen/rOMzay.js'></script><script src='https://codepen.io/bear0064/pen/avmyzL.js'></script>
<script >angular.module('starter', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
// Each tab has its own nav history stack:
.state('tab.list1', {
url: '/list1',
views: {
'tab-list1': {
templateUrl: 'templates/tab-list1.html',
controller: 'list1Ctrl'
}
}
})
.state('tab.list2', {
url: '/list2',
views: {
'tab-list2': {
templateUrl: 'templates/tab-list2.html',
controller: 'list2Ctrl'
}
}
})
.state('tab.list3', {
url: '/list3',
views: {
'tab-list3': {
templateUrl: 'templates/tab-list3.html',
controller: 'list3Ctrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/list1');
})
.controller('MyCtrl', function($scope) {
$scope.data = {
showDelete: false
};
})
.controller('list1Ctrl', function($scope, $ionicModal, $ionicPopup) {
$scope.saved = localStorage.getItem('list1');
$scope.list1s = (localStorage.getItem('list1') !== null) ? JSON.parse($scope.saved) : [{
text: 'DrumSticks',
done: false
}, {
text: 'CornBread',
done: false
}, {
text: 'Peach Schnapps',
done: false
}, {
text: 'Carrots',
done: false
}];
localStorage.setItem('list1', JSON.stringify($scope.list1s));
$scope.moveItem = function(item, fromIndex, toIndex) {
$scope.list1s.splice(fromIndex, 1);
$scope.list1s.splice(toIndex, 0, item);
localStorage.clear('list1');
localStorage.setItem('list1', JSON.stringify($scope.list1s));
};
$scope.onItemDelete = function(item) {
var confirmPopup = $ionicPopup.confirm({
title: 'Delete',
template: 'Are you sure?'
});
confirmPopup.then(function(res) {
if (res) {
$scope.list1s.splice($scope.list1s.indexOf(item), 1);
localStorage.clear('list1');
localStorage.setItem('list1', JSON.stringify($scope.list1s));
}
});
};
$scope.addTodo = function() {
$scope.list1s.push({
text: $scope.todoText,
done: false
});
localStorage.setItem('list1', JSON.stringify($scope.list1s));
$scope.todoText = ''; //clear the input after adding
};
})
/////////////// Tab Two ///////////////
.controller('list2Ctrl', function($scope, $ionicModal, $ionicPopup) {
$scope.saved = localStorage.getItem('list2');
$scope.list2s = (localStorage.getItem('list2') !== null) ? JSON.parse($scope.saved) : [{
text: 'DrumS',
done: false
}, {
text: 'CornB',
done: false
}, {
text: 'PeachS',
done: false
}, {
text: 'Car',
done: false
}];
localStorage.setItem('list2', JSON.stringify($scope.list2s));
$scope.moveItem = function(item, fromIndex, toIndex) {
$scope.list2s.splice(fromIndex, 1);
$scope.list2s.splice(toIndex, 0, item);
localStorage.clear('list2');
localStorage.setItem('list2', JSON.stringify($scope.list2s));
};
$scope.onItemDelete = function(item) {
var confirmPopup = $ionicPopup.confirm({
title: 'Delete',
template: 'Are you sure?'
});
confirmPopup.then(function(res) {
if (res) {
$scope.list2s.splice($scope.list2s.indexOf(item), 1);
localStorage.clear('list2');
localStorage.setItem('list2', JSON.stringify($scope.list2s));
}
});
};
$scope.addTodo = function() {
$scope.list2s.push({
text: $scope.todoText,
done: false
});
localStorage.setItem('list2', JSON.stringify($scope.list2s));
$scope.todoText = ''; //clear the input after adding
};
})
/////////////// Tab Three ///////////////
.controller('list3Ctrl', function($scope, $ionicModal, $ionicPopup) {
$scope.saved = localStorage.getItem('list3');
$scope.list3s = (localStorage.getItem('list3') !== null) ? JSON.parse($scope.saved) : [{
text: 'Jank',
done: false
}, {
text: 'More Jank',
done: false
}, {
text: 'Some Gank',
done: false
}, {
text: 'Tools',
done: false
}];
localStorage.setItem('list3', JSON.stringify($scope.list3s));
$scope.moveItem = function(item, fromIndex, toIndex) {
$scope.list3s.splice(fromIndex, 1);
$scope.list3s.splice(toIndex, 0, item);
localStorage.clear('list3');
localStorage.setItem('list3', JSON.stringify($scope.list3s));
};
$scope.onItemDelete = function(item) {
var confirmPopup = $ionicPopup.confirm({
title: 'Delete',
template: 'Are you sure?'
});
confirmPopup.then(function(res) {
if (res) {
$scope.list3s.splice($scope.list3s.indexOf(item), 1);
localStorage.clear('list3');
localStorage.setItem('list3', JSON.stringify($scope.list3s));
}
});
};
$scope.addTodo = function() {
$scope.list3s.push({
text: $scope.todoText,
done: false
});
localStorage.setItem('list3', JSON.stringify($scope.list3s));
$scope.todoText = ''; //clear the input after adding
};
})
//# sourceURL=pen.js
</script>
</body></html>
