How to add divider to ion-list items?

I’ve searched and tried many example options, but nothing seems to offer a solid solution for having the great ion-list item functionality (ie swipe option buttons etc) and yet still work with list dividers. Some solutions only work with non-complex lists (ie no option buttons) others add a delegator that adds elements to the dom outside of the ion-item, but they don’t get cleaned up if you update the list items.

So, I’m struggling and feel that either this is a major gap (that should be either work in progress to add/fix) or I’ve missed some common approach that others are taking??

Any tips or advice on what to do?


Current thinking is that I manually create separate ion-lists for each group within a divider… and construct the view by going <div class="item item-divider"> and then start a <ion-item... with the ng-repeat, then another item-divider and so on etc.

I can see this working ok for small number of groups with larger items in each group, but doing this for, say and A-Z of letters would be crazy and might be a clumsy way of handling.

I’ve only got 5-6 groups, so not sure if this will be an issue - will let you know what I discover !!

Inside the ion-list put a div and add your ng-repeat on this div. Inside the div, put you divclass=“item item-divider” and your ion-item and it should work fine.