CODEWITHSUNDEEP
cssangularjsionic-frameworkbackground-color
jehicks2
jehicks2

Reputation: 341

Ionic-Framwork/Angular: Having alternating ion-item background colors with collection-repeat

Relatively new to Ionic. I have seen examples of this succeeding here in stackoverflow 

http://stackoverflow.com/questions/30584948/ionic-framework-different-background-color-for-each-list-item
http://stackoverflow.com/questions/30806738/why-collection-repect-not-show-alternate-color-in-angular-js

However, I not having success in the implementation. I have my collection-repeat in an ion-item tag. 

 <ion-item class="item item-thumbnail-left artistList" collection-repeat="artist in artists | filter:searchText" collection-item-height = "100px" ng-click="artistDetail(artist)" on-swipe-left="onSwipeLeft(artist)">
    <img ng-src="{{ artist.image }}">
    <h2>{{ artist.name }}</h2>
    <h4>{{ artist.email }}</h4>
    <h4>{{ artist.twitter }}</h4>  
    <h4>Upcoming Event: {{ artist.artist_info.upcoming_events[0].datetime | date: 'MMM d, y' }} </h4>
    <h4 class="defaultValue" ng-hide="artist.artist_info.upcoming_events[0].datetime"> None Yet!</h4>
    <div class = "item-icon-right">
      <i class="icon ion-ios-arrow-right item-right positive"></i>
    </div>
    <ion-option-button ng-click="payPal(artist.artist_info.paypal_link)" class="button-positive icon ion-social-usd"></ion-option-button>
    <ion-option-button class="button-positive icon ion-heart"></ion-option-button>
  </ion-item>

I attempted to do ng-class-odd="odd-row" ng-class-even="even-row"and have declare the css but there was no change. Does this work differently with ionic-item tag?

Here is similar to what I would like (Except I want every other to be a different color):

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

Upvotes: 1

Views: 2359

Answers (1)

Swapnil M Mane
Swapnil M Mane

Reputation: 336

One solution could be to use the $index property of the ion-list.

Just to give you some information about $index it gives the index of current list item and starts from zero index. Means the index of first item will be zero.

As per the code provided by you the following code should work

<ion-item class="item item-thumbnail-left artistList" 
          collection-repeat="artist in artists | filter:searchText"
          collection-item-height = "100px" 
          ng-click="artistDetail(artist)" 
          on-swipe-left="onSwipeLeft(artist)"

          ng-class="$index%2 != 0 ? 'classA' : ''" >

It will added the classA on every alternate item starting from second item of list (since the index of list is started with zero)

Refer this updated Plnkr code.

Hope this will help.

Upvotes: 2

Related Questions