.
ionicv1 tutorial
113 Ionic1 List
Note
ion-list
Delegate: $ionicListDelegate
The List is a widely used interface element in almost any mobile app, and can include content ranging from basic text all the way to buttons, toggles, icons, and thumbnails.
Both the list, which contains items, and the list items themselves can be any HTML element. The containing element requires the list class and each list item requires the item class.
However, using the ionList and ionItem directives make it easy to support various interaction modes such as swipe to edit, drag to reorder, and removing items.
Codes
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width">
<title></title>
<!--local lib-->
<!--<script src="lib/ionic/js/ionic.bundle.js"></script>-->
<!--cloud lib-->
<script src="http://code.ionicframework.com/1.3.2/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<!--<script src="cordova.js"></script> -->
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above-->
<!--<link href="css/ionic.app.css" rel="stylesheet">-->
<!--local lib-->
<!--<link href="lib/ionic/css/ionic.css" rel="stylesheet">-->
<!--cloud lib-->
<link href="http://code.ionicframework.com/1.3.2/css/ionic.css" rel="stylesheet">
<!--ionic custom styling-->
<style>
.platform-ios .manual-ios-statusbar-padding{padding-top:20px}.manual-remove-top-padding{padding-top:0}.manual-remove-top-padding .scroll{padding-top:0!important}.list.card.manual-card-fullwidth,ion-list.manual-list-fullwidth div.list{margin-left:-10px;margin-right:-10px}.list.card.manual-card-fullwidth>.item,ion-list.manual-list-fullwidth div.list>.item{border-radius:0;border-left:0;border-right:0}.show-list-numbers-and-dots ul{list-style-type:disc;padding-left:40px}.show-list-numbers-and-dots ol{list-style-type:decimal;padding-left:40px}
</style>
</head>
<body ng-app="app" animation="slide-left-right-ios7" >
<div>
<div>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</div>
</div>
<script id="home.html" type="text/ng-template">
<ion-view title="Home" id="page1">
<ion-nav-buttons side="left" class="has-header">
<button class="button button-icon icon ion-ios-minus-outline"
ng-click="data.showDelete = !data.showDelete; data.showReorder = false"></button>
</ion-nav-buttons>
<ion-nav-buttons side="right" class="has-header">
<button class="button" ng-click="data.showDelete = false; data.showReorder = !data.showReorder">
Reorder
</button>
</ion-nav-buttons>
<ion-content padding="true" class="has-header">
<!-- 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>
</ion-view>
</script>
<script>
/*create js object app, bind to html app, use ionic framework*/
var app=angular.module('app',['ionic']);
/******************************/
/*define CONTROLLERS & CONFIGS*/
/******************************/
/*define app.controller methods*/
app.controller('homeCtrl',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 }
];
});
/*define app.config method*/
app.config(function($stateProvider,$urlRouterProvider){
$stateProvider.state('home',{url:'/page1',templateUrl:'home.html',controller:'homeCtrl'});
$urlRouterProvider.otherwise('/page1')
});
/************************/
/*define SYSTEM SETTINGS*/
/************************/
app.config(function($ionicConfigProvider, $sceDelegateProvider){
$sceDelegateProvider.resourceUrlWhitelist([ 'self','*://www.youtube.com/**', '*://player.vimeo.com/video/**']);
})
app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
});
/*
This directive is used to disable the "drag to open" functionality of the Side-Menu
when you are dragging a Slider component.
*/
app.directive('disableSideMenuDrag', ['$ionicSideMenuDelegate', '$rootScope', function($ionicSideMenuDelegate, $rootScope) {
return {
restrict: "A",
controller: ['$scope', '$element', '$attrs', function ($scope, $element, $attrs) {
function stopDrag(){
$ionicSideMenuDelegate.canDragContent(false);
}
function allowDrag(){
$ionicSideMenuDelegate.canDragContent(true);
}
$rootScope.$on('$ionicSlides.slideChangeEnd', allowDrag);
$element.on('touchstart', stopDrag);
$element.on('touchend', allowDrag);
$element.on('mousedown', stopDrag);
$element.on('mouseup', allowDrag);
}]
};
}]);
/*
This directive is used to open regular and dynamic href links inside of inappbrowser.
*/
app.directive('hrefInappbrowser', function() {
return {
restrict: 'A',
replace: false,
transclude: false,
link: function(scope, element, attrs) {
var href = attrs['hrefInappbrowser'];
attrs.$observe('hrefInappbrowser', function(val){
href = val;
});
element.bind('click', function (event) {
window.open(href, '_system', 'location=yes');
event.preventDefault();
event.stopPropagation();
});
}
};
});
</script>
</body>
</html>
|
Reference
Demo
.
See the Pen 308 IonicV1 List by notarazi (@notarazi) on CodePen.
.
No comments:
Post a Comment