Clever Geek Handbook

How do I change the background color of a list?

I have an array of data as I have three different types of status for example. ok, expected to expire. When listing in this array, I need to add a different color for each state. How can i do this?

This is how I enumerate the array:

<ion-list>
  <ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}">
    <img src="{{playlist.src}}" id="thumbnile">
    {{playlist.name}}
  </ion-item>
</ion-list>
+3


source to share


2 answers


This can be done with the ng class conditional operator

<ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}">
    <p ng-class="{ 'okay': 'status-okay', 'pending': 'status-pending', 'expired' : 'status-expired'}[playlist.status]">
      <img src="{{playlist.src}}" id="thumbnile">{{playlist.name}}
    </p>
</ion-item>


CSS

.status-okay {
    background-color: green;
}

.status-pending {
    backgroud-color: yellow;
}

.status-expired {
    backgroud-color: red;
}
+2


source


You can use ng class and give them different css classes.



<p ng-class="{strike: deleted, bold: important, red: error}">Example</p>
Run codeHide result


You can read more here: https://docs.angularjs.org/api/ng/directive/ngClass

+1


source






More articles:


All Articles