title: Ionic framework: Different background color for each list-item
body: <p>I would like to have a different background color for every list-item using ionic.
  For example a list of fruit containing: banana, apple, orange...
  For banana the background would be yellow
  For apple, it would be green
  For orange, it would be yellow
  ...</p>
  
  <p>Does anyone have an idea on how to achieve this?</p>
  
  <p>I have tried to work with ng-style and ng-class but I did not succeed to obtain the wanted result.</p>
  
  <p>I use collection-repeat for the list.</p>
  
  <p>Thank you!</p>
  
  <p>EDIT:</p>
  
  <p><a href="http://plnkr.co/edit/L80IcehgBQTiVXCCLWo9?p=preview" rel="nofollow">http://plnkr.co/edit/L80IcehgBQTiVXCCLWo9?p=preview</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="myApp"&gt;
  &lt;head&gt;
  
    &lt;script src="http://code.ionicframework.com/nightly/js/ionic.bundle.js?4"&gt;&lt;/script&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="http://code.ionicframework.com/nightly/css/ionic.css"&gt;
  &lt;/head&gt;
  &lt;body ng-controller="MainCtrl as main"&gt;
    &lt;ion-header-bar class="bar-positive"&gt;
      &lt;h1 class="title"&gt;1000 Items&lt;/h1&gt;
    &lt;/ion-header-bar&gt;
    &lt;ion-content&gt;
      &lt;ion-list&gt;
        &lt;ion-item collection-repeat="item in main.items" ng-class="item == '0' ? 'classA' "&gt;
          {{item}}
        &lt;/ion-item&gt;
      &lt;/ion-list&gt;
    &lt;/ion-content&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>var myApp = angular.module('myApp', ['ionic']);
  
  myApp.controller('MainCtrl', function() {
    this.items = [];
    for (var i = 0; i &lt; 1000; i++) this.items.push(i);
  });
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.classA { 
      background-color: black;
  
  
  }
  </code></pre>