Ionic ng-repeat performance, looking for solution, with collection-repeat

ionic-v1
1

Currently i have this code working

<div class="card">
            <div class="list list-inset" ng-repeat="event in ::vm.events">
                <ion-item class="item-icon-left item-text-wrap item item-avatar no-i-content">
                    <i class="icon ion-calendar"></i>
                    <h2> {{event.date | date:' EEEE MMMM d, y'}}</h2>
                </ion-item>
                <ion-item class="item-icon-left item-text-wrap item item-avatar" ng-repeat="eventee in ::event.events">
                    <i class="icon ion-clock"></i>
                    <h2>{{eventee.datetime | dateParse | date:'shortTime' }}</h2>
                    <p>{{eventee.description}}</p>
                </ion-item>
            </div>
        </div>

The issue I’m running into is how would i go about using collection-repeat, with how i have this?

i have tried many times and they all result in the collection repeat not displaying anything, but i can look at the source in the browser and can see the code

any help would be greatly appreciated

2 
<div class="card">
        <div class="list list-inset" ng-repeat="event in ::vm.events">
            <ion-item class="item-icon-left item-text-wrap item item-avatar no-i-content">
                <i class="icon ion-calendar"></i>
                <h2> {{event.date | date:' EEEE MMMM d, y'}}</h2>
            </ion-item>
            <ion-item class="item-icon-left item-text-wrap item item-avatar"
  collection-repeat="eventee in ::event.events"
  collection-item-width="'100%'"
  collection-item-height="getItemHeight(item, $index)"
  ng-style="{height: getItemHeight(item, $index)}">
                <i class="icon ion-clock"></i>
                <h2>{{eventee.datetime | dateParse | date:'shortTime' }}</h2>
                <p>{{eventee.description}}</p>
            </ion-item>
        </div>
    </div>

In your scope put:

$scope.getItemHeight(item, index) {
    return 50; //Parsed as pixels, return value as int
};

Something like this Should work, but if you provide a codepen illustrating your ng-repeat, I could try and change it to use collection repeat :wink:

1 Like
3

Thanks for your response @iwantwin, i will get a codepen up in a few minutes hang tight.

1 Like
4

Alright @iwantwin here is the codepen

5

Just to be clear: I don’t think my solution is really elegant. This should just help you get on your way really :wink:

I didn’t have collection-repeat inside a list like you did before, so it was some fiddling to make this work… Some key points that I had to tackle:

A list that cannot continue to the bottom becasue a next item is there… How to solve? → From the docs (http://ionicframework.com/docs/api/directive/collectionRepeat/)

If you wish to have multiple lists on one page, put each list within its own ionScroll container.

This rendered awfully, since items would disappear beneath the next date… Solution? The docs again :wink:

Each collection-repeat list will take up all of its parent scrollView’s space.

A few things where you’ll bump your head if you continue:

  • You have to know the exact size of your item, because the collection repeat needs this value. It’s fine if you need to do this dynamically (that’s what the getItemHeight method is for on the controller scope), but it must be calculatable.

  • You have to put a height to the container for the collection repeat, because if you don’t it will just render weird :wink: (You could do this dynamically based on amount of items or something, but I like current approach with an ion-scroll nested more, you should however pay some attention to make page scrolling easier, maybe inset the nested ion-scroll or something like that.)

Hope this helped for a bit… Good luck tweaking this :wink:

1 Like
6

@iwantwin Thanks for your help i greatly appreciate it.

1 Like