Customize List Dividers


#1

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.


#2

Hi,

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


#3

Something like

`



{{section.title}}
`

?


#4

Yeap
Something like this.
Is it work?


#5

I did:

<ion-content> <ion-list> <ion-item collection-repeat="section in sectionVm.sectionList | orderBy: '-category'" ui-sref="menu({sectionId: section.id})"> <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); }


#6

Can you share the sectionList object?