Collection-repeat throwing error when using multiple lists

collection-repeat throwing Error but ng-repeat is working fine with multiple lists.

When using two list inside ion-content and binding data using collection-repeat instead of ng-repeat then getting below error and list stop scrolling.

RangeError: Maximum call stack size exceeded

please find code pen for this you have to use developer tool to see error…

collection repeat needs a scroll container.
if you use 1 collection repeat it uses the ion-content scroll view.
But if you have more than one collection repeat your should put them in seperated scroll-view with a fixed heigth:

ion-scrolls around the lists

Ok thats fine… but how can i handle if i want to display one at a time and both are infinite list and can not assign height .

Can we use collection-repeat instead on ng repeat. in below case to improve performance…

I would add ion-tabs and put the collection repeats in a tab :blush:

ion-tab is not right way it will take some space as well or what if one main tab already exist…we are rendering our all list using popover menu clicks and within list we are using ng-repeat.


Now want to replace ng-repeat with collection-repeat.

and putting the list in a modal? like i click a button -> content slides in you can scroll -> delete, order and if you are finished -> close the modal?.

Or you should add 2 states for the lists.
so you have really only 1 list in your dom?

like a state: url: 'lists/:listId’
if you call lists/1 -> you controller uses list 1 content and shows on the page
so you only have 1 collection repeat in your ion-content-

Or if you do not like 2 different states -> switch your list content in your controller.
Like list1 = […]; list2 = […]; if button for list 1 is clicked -> $scope.list = list1;