Generating list with dividers dynamically

ionic-v1
5

Instead of trying to get the GUI portion of your app to do this, why not use JavaScript to accomplish it? I have a similar scenario in my app. I display a user’s entire Address Book in a list. I needed the first letter dividers as you see in iOS address book.

So, I collect all the contacts (using PhoneGap API’s), then I iterate through them adding them to an object that has the first letters as properties.

Then, I use 2 ng-repeats. One repeats for the first letters in the contacts object. Inside there, I repeat for each actual contact.

Example :

var contacts = [ 
	{'givenName' : 'Lisa',	'familyName' : 'Adams'	},
	{'givenName' : 'Bob',	'familyName' : 'Arnet'	},
	{'givenName' : 'Frank',	'familyName' : 'Able'	},
	{'givenName' : 'John',	'familyName' : 'Crow'	},
	{'givenName' : 'Bill',	'familyName' : 'Ward'	}
];

var $scope.contacts = {};

var contactsLength = contacts;
var firstLetter;

for(var i = 0; i < contactsLength; i++) {
	firstLetter = contacts[i].familyName.substring(0,1).toUpperCase();

	if(!$scope.contacts[firstLetter]) $scope.contacts[firstLetter] = [];

	$scope.contacts[firstLetter].push ( contacts[i].givenName + ' ' + contacts[i].familyName );
}

Then, I end up with something that looks like this:

$scope.contacts = {
	'A' : [
		'Lisa Adams',
		'Bob Arnet',
		'Frank Able'
	],
	'C' : [
		'John Crow'
	],
	'W' : [
		'Bill Ward'
	]
}

In your HTML, do something like this:

<div class="list">

    <div class="item item-divider"
        ng-repeat-start="(firstLetter, contacts) in fc.contacts">
        {{firstLetter}}
    </div>

    <div class="item"
         ng-repeat="contact in contacts"
         bindonce
         ng-click="contactSelected(contact.id)">{{ contact }}
    </div>

    <div ng-repeat-end></div>

</div>

You end up with this:

7 Likes