Changing color of item element and last item in ionic list

Question

I have a dynamic ionic list and I would like to change the color of specific item inside the list,

let say that there are my items and I want to change the second bullet point to red, I'm using angular and ionic, I'll appreciate any help

the html code is this

<ion-list class="list">
<ion-item ng-repeat="topic in topics">
<div class="item-group">
    <div class="left-group">
     <div class="vertical-small-line"></div>
     <div class="bullet"></div> 
     <div class="vertical-line"></div>
    </div>
   <div class="right-group">
     <h3><a href="">{{topic.title}}</a></h3>
     <p class="block-ellipsis">{{topic.summary}}</p>
    </div>
</ion-item>
</ion-list>

https://i.sstatic.net/nLHjD.png

Regards

Answer 1

There are a few ways to distinguish the items in a list design wise. You can do this in CSS

1. Using CSS select the second item in the list, it is also possible to select first time, last item, every second item, every third item.. etc

   ion-list .item-group:nth-child(2) { background-color: #fff; }

2. Using Angular ng-repeat, this directive also exposes $index, inside the ng-repeat and that is the index of the item in the list.

   <ion-list class="list"> <ion-item ng-repeat="topic in topics"> <div class="item-group" ng-class="{'special-class': $index == 1}"> <div class="left-group"> <div class="vertical-small-line"></div> <div class="bullet"></div> <div class="vertical-line"></div> </div> <div class="right-group"> <h3><a href="">{{topic.title}}</a></h3> <p class="block-ellipsis">{{topic.summary}}</p> </div> </ion-item> </ion-list>