Collection-repeat

I’ve a long list of producers and relative products. I’d like to show them in a list with producer as item-divider and next all relative products, and so on… The list is very long, actually about 5000 elements, so I’ve tried to use collection-repeat, but I haven’t find any solution to display header with producer at the start of every products list.

ie.

  • producer foo
    aaa
    bbb
    ccc
  • producer bar
    ddd
    eee
    fff

It’s possibile? I must use ng-repeat?

Thanks.

They are both the same so if you can do it with ng-repeat you should be able to do it with collection-repeat

You’ll want to just inject an entry into the array for each divider you want at the correct place. Set a key on the object in the array to mark it as a header. Then add the class item-divider base on that key. You can also use ng-if on the inner markup to hide any information you don’t want inside the divider.

For collection repeat you’ll want to set the divider height so the list draws correctly. Again, just inject the required height when you’re amending the data array and use collection-repeat-height="producer.height" and all should be good.

<ion-item collection-repeat="producer in producers" ng-class="{'item-divider':producer.is_divider}">
  <h2>{{producer.name}}</h2>
  <p ng-if="!producer.is_divider">{{producer.info}}</p>
</ion-item> 

ty, I’ll try it as soon as possible…

Ok, this works, but with this solution I cannot use filters… unless I process the full list for every filter/search, that I would avoid if possible…