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): comments, make simpler

Browse Source
This commit is contained in:
Andy Joslin
2014-04-24 09:33:18 -06:00
parent e599d33b96
commit a1e25cdbab
2 changed files with 30 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
<html ng-app="ionic">
<html ng-app="contactsApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
@@ -23,7 +23,7 @@
<div class="list">
<div class="item"
collection-repeat="item in getContacts()"
collection-item-height="getHeight(item)"
collection-item-height="getItemHeight(item)"
ng-class="{'item-divider': item.isLetter}">
{{item.letter || (item.first_name+' '+item.last_name)}}
</div>

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

@@ -1,14 +1,20 @@
function MainCtrl($scope, $ionicScrollDelegate, filterFilter) {
angular.module('contactsApp', ['ionic'])
.controller('MainCtrl', function($scope, $ionicScrollDelegate, filterFilter) {
var letters = $scope.letters = [];
var contacts = $scope.contacts = [];
var currentCharCode = 'A'.charCodeAt(0) - 1;
//window.CONTACTS is imported from contacts.js
window.CONTACTS
.sort(function(a, b) {
return a.last_name > b.last_name ? 1 : -1;
})
.forEach(function(person) {
//Get the first letter of the last name, and if the last name changes
//put the letter in the array
var personCharCode = person.last_name.toUpperCase().charCodeAt(0);
//We may jump two letters, be sure to put both in
//(eg if we jump from Adam Bradley to Bob Doe, add both C and D)
var difference = personCharCode - currentCharCode;
for (var i = 1; i <= difference; i++) {
addLetter(currentCharCode + i);
@@ -17,6 +23,7 @@ function MainCtrl($scope, $ionicScrollDelegate, filterFilter) {
contacts.push(person);
});
//If names ended before Z, add everything up to Z
for (var i = currentCharCode + 1; i <= 'Z'.charCodeAt(0); i++) {
addLetter(i);
}
@@ -30,41 +37,51 @@ function MainCtrl($scope, $ionicScrollDelegate, filterFilter) {
letters.push(letter);
}
//Letters are shorter, everything else is 52 pixels
$scope.getItemHeight = function(item) {
return item.isLetter ? 38 : 52;
};
$scope.getContacts = function() {
var contactsByLetter = {};
//Filter contacts by $scope.search.
//Additionally, filter letters so that they only show if there
//is one or more matching contact
var letterHasMatch = {};
return contacts.filter(function(item) {
var itemDoesMatch = !$scope.search || item.isLetter ||
item.first_name.toLowerCase().indexOf($scope.search.toLowerCase()) > -1 ||
item.last_name.toLowerCase().indexOf($scope.search.toLowerCase()) > -1;
//Mark this person's last name letter as 'has a match'
if (!item.isLetter && itemDoesMatch) {
var letter = item.last_name.charAt(0).toUpperCase();
contactsByLetter[letter] = contactsByLetter[letter] || 0;
contactsByLetter[letter]++;
letterHasMatch[letter] = true;
}
return itemDoesMatch;
}).filter(function(item) {
if (item.isLetter && !contactsByLetter[item.letter]) {
//Finally, re-filter all of the letters and take out ones that don't
//have a match
if (item.isLetter && !letterHasMatch[item.letter]) {
return false;
}
return true;
});
};
//We have to figure out which scrollValue to go to for the letter
//Luckily, we already supply the height of every item to collection-repeat,
//so we will just use that!
$scope.goToLetter = function(letter) {
var scrollValue = 0;
var contacts = $scope.getContacts();
//Find the height of every item until we hit the given letter
for (var i = 0, ii = contacts.length; i < ii; i++) {
if (contacts[i].isLetter && contacts[i].letter === letter) {
break;
}
scrollValue += $scope.getHeight(contacts[i]);
scrollValue += $scope.getItemHeight(contacts[i]);
}
$ionicScrollDelegate.scrollTo(0, scrollValue);
};
$scope.getHeight = function(item) {
return item.isLetter ? 38 : 52;
};
}
});