Ionique cadre: couleur de fond Différente pour chaque élément de liste

Je voudrais avoir une couleur de fond différente pour chaque élément de liste à l'aide ionique.
Par exemple, une liste de fruits contenant: banane, pomme, orange...
Pour la banane le fond serait jaune
Pour apple, il serait vert
Pour orange, il serait jaune
...

Quelqu'un a une idée sur comment faire?

J'ai essayé de travailler avec ng-style et ng-classe, mais je n'ai pas réussi à obtenir le résultat voulu.

- Je utiliser de la collection de répéter pour la liste.

Merci!

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;


}
montrez-nous ce que vous avez essayé dans codepen ou plunkr
Bonjour, c'est ici: plnkr.co/modifier/L80IcehgBQTiVXCCLWo9?p=preview (c'est la première fois que je l'utilise, donc j'espère que je l'ai fait correctement)

OriginalL'auteur PainAndGain | 2015-06-01

  1. 4

    Votre ng-class expression dans l'erreur.

    Il devrait être ng-class="item == '0' ? 'classA' : ''"

    Plus, vous n'avez pas compris votre style.css dans index.html:

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

    C'est le plunker.

    Je vous remercie pour votre réponse. Je l'ai essayé mais ça ne fonctionne pas. J'ai placé le fichier css et changer le ng-classe, l'expression, mais rien ne change. Une autre idée?
    Mise à jour de réponse avec le plunker.
    Oups! J'ai fait une erreur en modifiant la plunker... Il fonctionne réellement désolé. Elle est ici: plnkr.co/modifier/L80IcehgBQTiVXCCLWo9?p=preview Merci beaucoup!
    Pas de soucis. Heureux je l'ai aidé. Upvotes sont toujours appréciés 🙂

    OriginalL'auteur LeftyX

  2. 3

    Essayer de code suivant:

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

    OriginalL'auteur Wysel

  3. 1

    Façon la plus simple pour atteindre la ligne alternant ou un élément de liste couleur d'arrière-plan est d'utiliser AngularJS la directive ng-classe-même et ng-classe-impair.

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

    OriginalL'auteur bgosalci