Geek Answers Handbook

Ionic structure: different background color for each list item

I would like to have a different background color for each list item using ionic. For example, a list of fruits containing: banana, apple, orange ... For a banana, the background would be yellow For an apple, it would be green For an orange, it would be yellow ...

Does anyone have an idea on how to achieve this?

I tried to work with ng-style and ng-class, but I could not get the desired result.

I am using collection-repeat for a list.

Thank!

EDIT:

http://plnkr.co/edit/L80IcehgBQTiVXCCLWo9?p=preview

HTML

<!DOCTYPE html>
<html ng-app="myApp">
<head>

  <script src="http://code.ionicframework.com/nightly/js/ionic.bundle.js?4"></script>
  <script src="script.js"></script>
  <link rel="stylesheet" href="http://code.ionicframework.com/nightly/css/ionic.css">
</head>
<body ng-controller="MainCtrl as main">
  <ion-header-bar class="bar-positive">
    <h1 class="title">1000 Items</h1>
  </ion-header-bar>
  <ion-content>
    <ion-list>
      <ion-item collection-repeat="item in main.items" ng-class="item == '0' ? 'classA' ">
        {{item}}
      </ion-item>
    </ion-list>
  </ion-content>
</body>
</html>

Js

var myApp = angular.module('myApp', ['ionic']);

myApp.controller('MainCtrl', function() {
  this.items = [];
  for (var i = 0; i < 1000; i++) this.items.push(i);
});

CSS

.classA { 
    background-color: black;


}
+4
source share
3 answers

Your expression is ng-classin error.

It should be ng-class="item == '0' ? 'classA' : ''"

, style.css index.html:

<link rel="stylesheet" href="style.css">

plunker.

+4

:

CSS

ion-item[isOdd='true'] > div.item-content{
    background-color: yellow !important;
}

ion-item[isOdd='false'] > div.item-content{
    background-color: orange !important;
}

HTML

<ion-item collection-repeat="item in main.items" isOdd="{{$odd}}">
+3

The easiest way to achieve a variable background color for a string or list of items is to use the AngularJS directive ng-class-even and ng-class-odd.

https://docs.angularjs.org/api/ng/directive/ngClassEven

+1
source

More articles:


All Articles