<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/moices/pen/jWjZMB?depth=everything&order=popularity&page=21&q=ionic&show_forks=false" />
<link rel='stylesheet prefetch' href='https://code.ionicframework.com/1.2.4/css/ionic.min.css'>
<style class="cp-pen-styles"></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="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane ng-controller="ListController" >
<ion-header-bar class="bar-dark">
<button class="button button-icon ion-minus-circled"
ng-click="data.showDelete = !data.showDelete; data.showReorder = false;"></button>
<h2 class="title">Refresher</h2>
<button class="button button-icon ion-navicon"
ng-click="data.showReorder = !data.showReorder; data.showDelete = false;"></button>
</ion-header-bar>
<div class="bar bar-subheader item-input-inset bar-light">
<label class="item-input-wrapper">
<i class="icon ion-search placeholder-icon"></i>
<input ng-model="query" type="search" placeholder="Search">
</label>
</div>
<ion-content class="has-subheader">
<ion-refresher on-refresh="doRefresh()"></ion-refresher>
<h3 class="padding">Pull to down to refresh the list</h3>
<ion-list show-delete="data.showDelete" show-reorder="data.showReorder">
<!-- Condicional class for star-->
<ion-item ng-class="{'star':item.star}" ng-repeat="item in artists | filter:query" class="item-thumbnail-left item-icon-right item-text-wrap">
<img ng-src="{{item.img}}" alt="{{item.name}} Photo">
<h2>{{item.name}}</h2>
<h3>{{item.lastname}}</h3>
<p>{{item.description | limitTo: 100}}{{item.description.length > 100 ? '…':''}}</p>
<!-- option button swiped -->
<button class="button button-clear icon ion-star button-assertive" ng-click="toggleStar(item)" ng-show="item.star"></button>
<ion-option-button class="button-dark" ng-click="toggleStar(item)">
<i class="icon ion-star"></i>
</ion-option-button>
<!-- Fin option button swiped-->
<ion-delete-button class="ion-minus-circled" ng-click="onItemDelete(item)"></ion-delete-button>
<ion-reorder-button class="ion-navicon" on-reorder="moveItem(item, $fromIndex, $toIndex)"></ion-reorder-button>
</ion-item>
</ion-list>
</ion-content>
</ion-pane>
</body>
</html>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://code.ionicframework.com/1.2.4/js/ionic.bundle.min.js'></script>
<script >// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.controller('ListController', ['$scope', '$http', function($scope, $http){
var data = [{"name": "Fanny","lastname": "Wynn","img": "http://lorempixel.com/400/200/","description": "Sunt occaecat adipisicing in dolore anim aliqua qui officia in. Reprehenderit ea ex nisi in pariatur. Tempor esse pariatur minim aliqua consequat anim incididunt. Nisi ex qui sint labore non. Ad adipisicing amet culpa minim occaecat consectetur anim adipisicing. Labore quis do anim ad nostrud incididunt deserunt officia eiusmod tempor ipsum officia reprehenderit.\r\n"},{"name": "Bowers","lastname": "Black","img": "http://lorempixel.com/400/200/","description": "Commodo ipsum ex eiusmod do sit in. Cupidatat eiusmod id tempor aute incididunt. Id est exercitation irure anim incididunt proident minim qui. Tempor et amet commodo nulla cillum ullamco nulla incididunt veniam amet laboris dolor elit. Est duis Lorem nulla consectetur consectetur eiusmod cupidatat irure id ut. Ad Lorem id consectetur nostrud sit quis ea ad minim sint Lorem quis. Occaecat qui occaecat veniam deserunt aliqua aliqua mollit pariatur magna aliquip excepteur nulla.\r\n"},{"name": "Jeanette","lastname": "Garcia","img": "http://lorempixel.com/400/200/","description": "Lorem enim veniam cillum excepteur dolor nisi culpa reprehenderit laborum. Ea dolore nulla dolor sint. Nulla do laborum commodo eu non et voluptate elit laborum magna.\r\n"}];
$scope.artists = data;
$scope.moveItem = function(item, fromIndex, toIndex) {
$scope.artists.splice(fromIndex,1);
$scope.artists.splice(toIndex,0,item);
};
$scope.onItemDelete = function(item){
$scope.artists.splice($scope.artists.indexOf(item),1);
};
// refresher
$scope.doRefresh = function() {
var data = [{"name": "Rene NEW ITEM !!!","lastname":"Deleon","img":"http://lorempixel.com/400/200/","description":"Pariatur id laboris incididunt dolore excepteur. Anim labore deserunt ullamco do laboris consectetur cupidatat exercitation nisi amet. Commodo enim laborum voluptate proident. Aliqua deserunt aute sunt consectetur consequat sunt anim ullamco ullamco proident magna voluptate exercitation.\r\n"},{"name": "Fanny","lastname": "Wynn","img": "http://lorempixel.com/400/200/","description": "Sunt occaecat adipisicing in dolore anim aliqua qui officia in. Reprehenderit ea ex nisi in pariatur. Tempor esse pariatur minim aliqua consequat anim incididunt. Nisi ex qui sint labore non. Ad adipisicing amet culpa minim occaecat consectetur anim adipisicing. Labore quis do anim ad nostrud incididunt deserunt officia eiusmod tempor ipsum officia reprehenderit.\r\n"},{"name": "Bowers","lastname": "Black","img": "http://lorempixel.com/400/200/","description": "Commodo ipsum ex eiusmod do sit in. Cupidatat eiusmod id tempor aute incididunt. Id est exercitation irure anim incididunt proident minim qui. Tempor et amet commodo nulla cillum ullamco nulla incididunt veniam amet laboris dolor elit. Est duis Lorem nulla consectetur consectetur eiusmod cupidatat irure id ut. Ad Lorem id consectetur nostrud sit quis ea ad minim sint Lorem quis. Occaecat qui occaecat veniam deserunt aliqua aliqua mollit pariatur magna aliquip excepteur nulla.\r\n"},{"name": "Jeanette","lastname": "Garcia","img": "http://lorempixel.com/400/200/","description": "Lorem enim veniam cillum excepteur dolor nisi culpa reprehenderit laborum. Ea dolore nulla dolor sint. Nulla do laborum commodo eu non et voluptate elit laborum magna.\r\n"}];
$scope.artists = data;
$scope.$broadcast('scroll.refreshComplete');
}
// option button swiped
$scope.toggleStar = function(item) {
item.star = !item.star;
}
}])
//# sourceURL=pen.js
</script>
</body></html>
