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.stack.imgur.com/nLHjD.png

Regards

We need the code you are using now, at least the html – michelem Aug 21 '15 at 16:09 — michelem, Aug 21 '15 at 16:09

score 2 · Accepted Answer · answered Aug 25 '15 at 21:06

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

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; }
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>

score 0 · Answer 2 · answered Aug 27 '15 at 19:50

I also could do something like this

HTML <div ng-class="getClass($index, true)">

and Controller

$scope.getClass = function(index, isLightBullet, list) {
    var theClass = {};
    if(isLightBullet){
       if(index === 0 ){
         theClass = {'vertical-small-line-hided': true};
       }
       else{
         theClass = {'vertical-small-line': true};
       }
    return theClass;
  };

Changing color of item element and last item in ionic list

2 Answers2