How to give List different color to each item..Problem

ionic-v1
1

I am trying to give different color to each list item.

.controller('SuralistsCtrl', function($scope, $state) {
  $scope.suralists = [
    {
      id: '1',
      title: 'Item A',
      desc: '(abcdefgh)',
      backgroundColor: '#000000',
    },
    {
      id: '2',
      title: 'Item B',
      desc: '(abcdefgh)',
      backgroundColor: '#ffffff',
    },    
 ]; 
});

in html file

<ion-content has-header="true" scroll-watch>

    <ion-list>

      <ion-item ng-repeat="suralist in suralists" style="background-color: {{suralist.backgroundColor}}" class="item-left item-icon-left item-icon-right" href="#/app/sura{{suralist.id}}" >
        <i class="icon ion-ios-book"></i>
        {{suralist.title}}<div class="item-note custom-item-note" >{{suralist.desc}}</div>
        <i class="icon ion-chevron-right custom-icon"></i>
      </ion-item>
    </ion-list>
  </ion-content>

In chrome I checked style attribute added properly but color is not changing…anybody can help me to resolve it?

2

Of course it’s not working, you’re trying to style an ion-item directive.

You need to do this with on a ultimately generated list div.

3

Oh Yea you are right. Thanks