javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

demo(collection-repeat): contacts

Browse Source
This commit is contained in:
Andy Joslin
2014-04-24 08:57:17 -06:00
parent b9fd76b35b
commit b0ff90d11a
3 changed files with 3083 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3000
demos/collection-repeat/contacts.js Normal file
View File

File diff suppressed because it is too large Load Diff

47
demos/collection-repeat/index.html
View File

@@ -5,32 +5,55 @@
<title>Collection-Repeat: Early Preview</title>
<link href="http://code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<link href="../../dist/css/ionic.css" rel="stylesheet">
<script src="../../dist/js/ionic.bundle.js"></script>
<link href="style.css" rel="stylesheet">
<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="script.js"></script>
<script src="contacts.js"></script>
</head>
<body ng-controller="MainCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">collection-repeat</h1>
<a class="button" ng-click="scrollBottom(true)">
Scroll Bottom
</a>
<h1 class="title">Contacts</h1>
</ion-header-bar>
<ion-header-bar class="bar-light bar-subheader">
<input type="search" placeholder="Filter items..." ng-model="search">
<input type="search" placeholder="Filter contacts..." ng-model="search">
</ion-header-bar>
<ion-content>
<ion-refresher on-refresh="onRefresh()"></ion-refresher>
<div class="list">
<div class="item"
collection-repeat="item in items | filter:search"
ng-style="{height: getItemHeight($index)}"
collection-item-height="getItemHeight($index)">
{{item}}
collection-repeat="item in getContacts()"
collection-item-height="getHeight(item)"
ng-class="{'item-divider': item.isLetter}">
{{item.letter || (item.first_name+' '+item.last_name)}}
</div>
</div>
</ion-content>
<div class="letters has-header has-subheader">
<div class="letter"
ng-repeat="letter in letters"
ng-click="goToLetter(letter)"
ng-style="{top: (100/26)*$index + '%'}">
{{letter}}
</div>
</div>
<style>
.letters {
right: 0;
bottom: 0;
width: 25px;
position: absolute;
}
.letter {
text-align: center;
font-size: 15px;
height: 20px;
width: 100%;
cursor: pointer;
right: 0;
position: absolute;
z-index: 100;
}
</style>
</body>
</html>

65
demos/collection-repeat/script.js
View File

@@ -1,25 +1,56 @@
function MainCtrl($scope, $ionicScrollDelegate, $timeout) {
$scope.items = [];
for (var i = 0; i < 5000; i++) {
$scope.items.push('item '+i);
function MainCtrl($scope, $ionicScrollDelegate, filterFilter) {
var letters = $scope.letters = [];
var contacts = $scope.contacts = [];
var currentCharCode = 'A'.charCodeAt(0) - 1;
window.CONTACTS
.sort(function(a, b) {
return a.last_name > b.last_name ? 1 : -1;
})
.forEach(function(person) {
var personCharCode = person.last_name.toUpperCase().charCodeAt(0);
var difference = personCharCode - currentCharCode;
for (var i = 1; i <= difference; i++) {
addLetter(currentCharCode + i);
}
currentCharCode = personCharCode;
contacts.push(person);
});
for (var i = currentCharCode + 1; i <= 'Z'.charCodeAt(0); i++) {
addLetter(i);
}
$scope.getItemHeight = function(index) {
return 52 + 5 * (index % 5);
function addLetter(code) {
var letter = String.fromCharCode(code);
contacts.push({
isLetter: true,
letter: letter
});
letters.push(letter);
}
$scope.getContacts = function() {
return contacts.filter(function(item) {
return !$scope.search || item.isLetter ||
item.first_name.toLowerCase().indexOf($scope.search.toLowerCase()) > -1 ||
item.last_name.toLowerCase().indexOf($scope.search.toLowerCase()) > -1;
});
};
$scope.onRefresh = function() {
$timeout(function() {
$scope.items.unshift(-$scope.items.length);
$scope.items.unshift(-$scope.items.length);
$scope.items.unshift(-$scope.items.length);
$scope.items.unshift(-$scope.items.length);
$scope.items.unshift(-$scope.items.length);
$scope.$broadcast('scroll.refreshComplete');
}, 1500);
$scope.goToLetter = function(letter) {
var scrollValue = 0;
var contacts = $scope.getContacts();
for (var i = 0, ii = contacts.length; i < ii; i++) {
if (contacts[i].isLetter && contacts[i].letter === letter) {
break;
}
scrollValue += $scope.getHeight(contacts[i]);
}
$ionicScrollDelegate.scrollTo(0, scrollValue);
};
$scope.scrollBottom = function(animate) {
$ionicScrollDelegate.scrollBottom(animate);
$scope.getHeight = function(item) {
return item.isLetter ? 38 : 52;
};
}