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?
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:
HTML:
list
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)
HTML 2:
list
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( contact.name[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.
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] = [];
}
$rootScope.boulders[letter].push(boulders[i]);
}
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.
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
thank you very much. but it worked the way it was before. 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.
Ah, glad it worked I’m quiet new to angular and ionic myself, so I guess I just didn’t recognize the signature then
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
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 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
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.
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
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.
I’m quiet new to angular and ionic myself, so I guess I just didn’t recognize the signature then 