List View style

ionic-v1
1

Hello,
I’m trying to create a ion-list with a different style of what “comes out of the box”. I’m trying to build something like this:

image

How can I achieve this with the < ion list > and < ion-item>?
Is there a way to condition the < ion item > item class, based on the index?
I’m new to the platform, and I don’t know very well my way around this.

2

What about using a Grid instead?

4

So you could use ng-class in combination with ng-repeats index.

<h1 ng-repeat="item in items" ng-class="{'red' : $index % 3 == 0 }">
  {{item.name}}
</h1>
1 Like
5

Thanks for your solution. I ended up using a < ion item > like this:
< ion-item
ng-repeat="item in items"
ng-class=“item.class” >

item {{$index}}

< /ion-item >

…which is basically the same thing :slight_smile:

6

A more complete picture.