Collection repeat on multiple dynamic created ion-lists


hey everybody,

i have a related question on the collection repeat with multiple created ion-lists with item-dividers.
what i have:
a list of elements (lets say i have a list of contact items) divided by a item-divider (divide on the first letter of a name). if now a name does not exist… the the item-divider for that name plus the ion-list is not created. does this makes sense?
so i have two ng-repeats. one for the item-divider and a second nested one for the specific list elements.
so the common question is if collection repeat in this case does work?
i have tried it out… but the outcome was not very satisfied. anyone from the ionic team or any developer run into this issue or knows if it can work?

any help is much appreciated.

many thanks,


Hi Michael. I haven’t done this yet, but I am interested in it. Do you have a plunk or a fiddle with your current code?


If you had an array based on first letter index, you could use ng-if on the first list to check for contactcollection[a].length. But I assume you have just a regular list, and use filters for the second collection. In this case you could make a method in your controller which takes a (first)letter and takes all items that are to be displayed, you can then return the length of the array with found items from that function and call the function in your first ng-repeat’s ng-if.

Without writing it out completely, it would look something like this in pseudo code:

    list-divider ng-repeat="letter in A-Z" ng-if="collection[letter].length"
         list-item ng-repeat="contact in collection[letter]"

Or (second option, might be better)

    list-divider ng-repeat="letter in A-Z" ng-if="existsInCollection(letter) == true"
         list-item ng-repeat="contact in collection[letter]"

Javascript controller:

$scope.existsInCollection = function( letter ) {
    for( var contact in collection ) {
         if([0] == letter ) {
              return true;
    return false;

Note that in the scope i just return true whenever i found more then one item, this keeps performance going, you don’t want to loop if you got your answer, we just break the loop and return that we found one item and the divider needs to exist.

I hope this helps!


hey. many thanks for the answer. i actually was out of the office the last days. no i do it the first way you said. i check if the lets say letter exists and if not… the list remains empty. here a snippet of my controller:

$rootScope.boulders = {};

    var letter;
    for (var i = 0; i < data.length;i++){
    	var letter = data[i].section + ' - ' + data[i].floor + ' - ' +data[i].sector;

    	if (!$rootScope.boulders[letter]){
    		$rootScope.boulders[letter] = [];

so i think this makes sense right? but what i don’t understand is how i should do it in the template. i have there a nested ng-repeat. the first checks the letter and the second fills up with the data.

here is a code snippet from the template:

<ion-list class="list" can-swipe="true" option-buttons="itemButtons" ng-repeat="(letter, boulders) in boulders">

  	<div class="item-divider" ng-if="filtered.length > 0">

    <ion-item item="boulder" ng-repeat="boulder in filtered = (boulders)" ng-href="#/sectorList/{{boulder.si_id}}">




i deleted some things but this is the main idea. what do you think? can it work that way? the outcome is as many lists as matched letters. if the first hg-repeat is empty i hide it with ng-if

many thanks

<ion-list class="list" can-swipe="true" option-buttons="itemButtons" ng-repeat="(letter, filteredBoulders) in boulders">
  	<div class="item-divider" ng-if="filteredBoulders.length > 0">
    <ion-item item="boulder" ng-repeat="boulder in filteredBoulders" ng-href="#/sectorList/{{boulder.si_id}}">

I’ve changed some names, I think you’ll get a better result if you try this. You had some scope issues :wink:

It sure could work this way, you might still have to tweak something, but the idea is fine :wink: Let me know it you worked it out or need some more help :smile:


thank you very much. but it worked the way it was before. :wink: i also have a lot of filter options in the second hg-repeat. but yeah… this idea looks also great. i will check it out.

but actually that means that i only have to create the collection repeat on the second ng-repeat (the nested one) right? and not for both? because i also have to set the height of an element i am a bit worried about the divider items.

and one big thing is that it says in the docs… Each collection-repeat list will take up all of its parent scrollView’s space. If you wish to have multiple lists on one page, put each list within its own ionScroll container. what does this exactly means? i though if i use a ion-list directive… the ion-scroll is part of it?

but well… actually i am not in front of my code so i can’t really try out. :frowning:


Ah, glad it worked :slight_smile: I’m quiet new to angular and ionic myself, so I guess I just didn’t recognize the signature then :stuck_out_tongue:

You could create the item-divider with ng-if on boulder == boulders[0] i guess. Should do the same, and would avoid multiple lists.

I think the ion-scroll is part of the ion-list, since I hadn’t included it myself yet… But not sure, should check when you’re in front of your code again :wink:


well i am not sure if this will work. that would mean i need to put the item-divider in the other ng-repeat and check if there is something.

well ok i will check that out when i am in front of my project. till then… many thanks in advance and if i stuck somewhere i will write again here. :wink:



Actually, I draw my previous post back. Unless you can iterate over both letters and items in the letters, it’s not possible. You need one loop to iterate over letters, and one for items in the letter-collection. Doubt it can be done otherwise :wink: Let me know if you found a way though!


yes exactly thats my point. i need the two loops. and the question is if i then also need on both ng-repeats the collection-repeat? and the other problem is that the item-divider loop always creates new list containers. so i have multiple lists in a view and a nested loop. puuh… i am not sure if this works out well with collection-repeat


Why don’t you makes one list with a div inside and put the letter-repeat on there?

I didn’t work with collection-repeat yet, but isn’t it like a wrapper for ng-repeat? So you don’t need both but just use either one? Not sure though.


because it is a double filled array. the first part is the letter which i have to loop and the second is the items in that letter that needs to loop through. therefor i need to loops right? i did it actually without collection repeat and i actually just want to update it that it can work with collection repeat for performance issues.

yeah collection-repeat is so to say a ng-repeat but with the collection properties included thats right.

<ion-list class="list" can-swipe="true" option-buttons="itemButtons">
<div ng-repeat="(letter, filteredBoulders) in boulders">
  	<div class="item-divider" ng-if="filteredBoulders.length > 0">
    <ion-item item="boulder" ng-repeat="boulder in filteredBoulders" ng-href="#/sectorList/{{boulder.si_id}}">

Try something like this, this should result in one list with multiple letter dividers. Correct me if I’m wrong :wink:


yes this is an idea that can work. i just think if it works inside my project. i will try that out. thx in advance. if i know more - most probably tomorrow or on wednesday… i will let you know


Nice! I’ll be looking forward to it :slight_smile:


Ng-repeat on ng-repeat… the best way to have a slow angular app… but Collection-repeat is not dedicated to nested lists though…


You’re absolutely correct sir :wink:


collection repeat is creation too many DOM nodes. I have only 10 item in my array but in Inspect i can see more then 10 DOM nodes. Why this is happening ?


@akanksha_singh You are replying to a rather old topic, asking a question that does not seem related at all. Please open a new topic and post your question there.