Customize List Dividers

Hi there,

I am wondering how to customize the List Dividers to sort a list by categories. But instead of a name, I would like to show colors, like in this image:


Thanks in advance.


You need to set for every category in the list some type and in the data-ng-repeat to set the corresponding css class name

1 Like

Something like




Something like this.
Is it work?

I did:

<ion-content> <ion-list> <ion-item collection-repeat="section in sectionVm.sectionList | orderBy: '-category'" ui-sref="menu({sectionId:})"> <div class="foo {{section.category}}"></div> {{section.title}} </ion-item> </ion-list> </ion-content>

and the css

.category1 { background: green; } .category2 { background: red; } .foo { float: left; width: 10px; height: 51px !important; margin: -15px; border: 1px solid rgba(0, 0, 0, .2); }

Can you share the sectionList object?