bug: Several collection-repeat on the same template

[sydneyhenrard]

Type: bug

Platform: android 4.4 webview

I have a ion-list with several ion-item like that:

<ion-list>
        <ion-item class="item-divider">
            Pending
        </ion-item>
        <ion-item
                collection-repeat="pending in pendings">
            <h2>{{pending}}</h2>
        </ion-item>
        <ion-item class="item-divider">
            Recent
        </ion-item>
        <ion-item class="item-text-wrap"
                  collection-repeat="recent in recents">
            <h2">{{recent}}</h2>
        </ion-item>
</ion-list>

The items are not displayed and I get

Uncaught RangeError: Maximum call stack size exceeded
RepeatController.scrollView.__callback

The error is in the following code:

    scrollView.__callback = function(transformLeft, transformTop, zoom, wasResize) {
      var scrollValue = view.getScrollValue();
      if (renderStartIndex === -1 ||
          scrollValue + view.scrollPrimarySize > renderAfterBoundary ||
          scrollValue < renderBeforeBoundary) {
        render();
      }
   ====>   scrollView.__$callback(transformLeft, transformTop, zoom, wasResize);
    };

Please note that this error occurs with JS Scrolling. If I have only one collection-repeat instead of 2, it's OK.

I also tried one collection-repeat and one ng-repeat with native scrolling and the collection-repeat does not display all the items.

[tbro028]

have the same issue rc3. haven't tried upgrading or usering overflow-scroll="true" yet though.

[perrygovier]

Collection-repeat does not work with native scrolling. As of 1.0, it will force JS scrolling, but in the earlier RCs it would break collection-repeat.

Collection-repeat heavily manipulates the scrollable area, and does not play well with multiple collection-repeats. To achieve this functionality, nest them inside ion-scroll elements.

[LightZam]

i have same problem, any suggestion?
ion-scroll didn't do the trick

[diegobill]

👍 Same problem

[jgw96]

@LightZam @diegobill What version of ionic are guys seeing this issue with?

[diegobill]

@jgw96 ionic 1.7.12

[rapidtechsolutions]

@jgw96 same issue.

[LightZam]

@jgw96 ionic 1.7.12

[jgw96]

Sorry, would you be able to post the output of ionic info 1.7.12 is the cli version not the version of the framework your using. Sorry should have been more clear!

[rapidtechsolutions]

@jgw96

Cordova CLI: 5.3.3
Gulp version: CLI version 3.9.0
Gulp local: Local version 3.9.1
Ionic Version: 1.2.4
Ionic CLI Version: 1.7.14
Ionic App Lib Version: 0.7.0

[Clembl-git]

Same issue when using chrome or an android device... Is there any other way to fix it than replacing the 2nd collection-repeat or both by ng-repeat ?

Dev Environment :
Node Version : 4.4.0
Ionic CLI : 1.7.14
Ionic App : 0.7.0
Angular : 1.5.3

[Arxi]

+1 same issue here.

Cordova CLI: 6.1.1
Gulp version: CLI version 3.9.0
Gulp local: Local version 3.9.0
Ionic Version: 1.3.0
Ionic CLI Version: 1.7.14
Ionic App Lib Version: 0.7.0
OS: Distributor ID: LinuxMint Description: Linux Mint 17.2 Rafaela
Node Version: v0.12.14

[jimior2]

How multiple collection-repeats to play with ion-scroll ?

[saguilerao]

same issue ..

[miparnisari]

Same here. In my case, I see errors in the console but the elements look smaller than the specified height. @perrygovier When I wrap the collections inside ionic-scroll elements, I don't see anything, not even an error.

[gaurishrane]

Same issue over here to..
Is this a bug or it is out of scope of collection-repeat (It is not met to do this)
Do any one have at least tempory fix to this

[MazzMazz]

+1

[MazzMazz]

You can use ng-repeat instead of collection-repeat where this happens.
ng-repeat is not ideal but it is working

[pablomaurer]

I have the same problem with only one collection-repeat. appears when i go to another page. but all items are displayed.

Cordova CLI: 6.3.0
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 1.3.1
Ionic CLI Version: 2.0.0-beta.35
Ionic App Lib Version: 2.0.0-beta.19
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v5.12.0
Xcode version: Xcode 7.3 Build version 7D175

@jgw96 =)

[EduardMalik]

+1. Now use ng-repeat, but it's slow for >100 records list

Cordova CLI: 6.3.1
Gulp version: CLI version 3.9.0
Gulp local: Local version 3.9.1
Ionic Framework Version: 1.3.1
Ionic CLI Version: 1.7.16
Ionic App Lib Version: 0.7.3
OS: Distributor ID: Ubuntu Description: Ubuntu 15.04
Node Version: v1.8.4