Collection Repeat Dynamic Height

ionic-v1
1

Going from the docs, http://ionicframework.com/docs/api/directive/collectionRepeat/, you can use item-height and pass it an expression.

Since the overhaul of collection repeat I’ve got the impression that dynamic heights are now achievable, so how exactly have people been able to achieve that?

2

From the source code:

//4) Dynamic Mode
//- The user provides a dynamic expression for the width or height. This is re-evaluated
//  for every item, stored on the `.getValue()` field.

Meaning you send in an expression which calculate the height for each item individually and is therefor by far the slowest of the modes. It could look something like this:

<ion-item collection-repeat="employee in employees" item-height="getEmployeeHeight(employee)">
  <h3>{{employee.name}}</h3>
  <p ng-if="employee.salary > 0">Salary: {{employee.salary}}</p>
</ion-item>

$scope.getEmployeeHeight = function (employee) {
  if (employee.salary > 0) {
    return 75;
  } else {
    return 50;
  }
}

Giving you this result: http://plnkr.co/edit/Fsz5CG6hMwLPATQfQiGe?p=preview

3

@bodinaren

Thanks for the reply mate.

Okay so you give it an expression, and the example above it is a little more clear cut because if you know that the employee has a salary than you can account for that.

The situation I’ve got is say each employee has a description. There’s no way to know how long or short that description is, or more importantly how many lines it takes up, so how would I go about getting the each items height in this case?

I could check employee.description.length but that won’t take in account the screen width!

Cheers.

4

At this point the performance win of using collection-repeat is pretty much gone and you should just go ahead with ng-repeat instead.

More discussion here https://github.com/driftyco/ionic/issues/1691
and here Calcultate collection item height of collection repeat (+ next 2 posts)

5

The performance win of using collection-repeat is that unlike ng-repeat it will only generate the required amount of elements to fill the scroll view.

Going back to your example, only creating 15 ion-items, and then changing each items height is still going to be far more performant than creating 200 ion-items with ng-repeat. Wouldn’t you agree? @bodinaren

6

@cameronbourke I’m not sure about that. Generating 200 items is heavy for the webview at the beginning, but then it’s absolutely ok. More thant that, you absolutely can use infinite scrolling to generate more as soon as the user is close to reach the bottom of the list.

On the other hand, the Javascript must calculate on each scroll the size of the element to display and apply it to that element, which means a browser repaint. So if your user scrolls quickly, it’s going to end badly, I think - and my tests seems to prove it.

Because of this issue I personnally consider collection-repeat not being production ready for anything else than fixed size elements.

7

@JerryBels I tend to agree with you, using infinite scrolling looks like the way to go. Just loading enough to fill the scrollView and then keep adding them as the user scrolls down.

Cheers for the reply.

8

This is one of the most frustrating things about any of these web frameworks. Coming from native iOS I took UITableView for granted. What do you do? The options are either complicated canvas gymnastics (like Flipboard’s react canvas) or less than optimal performance as described above. I have the exact issue as described above - I don’t necessarily know what height my table cells need are going to be. It sounds like ng-repeat is the only option available? However this has some serious performance issues when using large images.