diff --git a/demos/collection-repeat/index.html b/demos/collection-repeat/index.html index 327341f150..6e6c76f271 100644 --- a/demos/collection-repeat/index.html +++ b/demos/collection-repeat/index.html @@ -1,4 +1,4 @@ - + @@ -23,7 +23,7 @@
{{item.letter || (item.first_name+' '+item.last_name)}}
diff --git a/demos/collection-repeat/script.js b/demos/collection-repeat/script.js index b594ca062e..7af0ae456c 100644 --- a/demos/collection-repeat/script.js +++ b/demos/collection-repeat/script.js @@ -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; - }; -} +});