离子框架/角度：具有交替的离子项目背景颜色和收集重复答案

【问题标题】：Ionic-Framwork/Angular: Having alternating ion-item background colors with collection-repeat离子框架/角度：具有交替的离子项目背景颜色和收集重复
【发布时间】：2016-03-05 19:07:32
【问题描述】：

Ionic 相对较新。我在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

但是，我在实施中没有成功。我在 ion-item 标签中有我的收藏重复。

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

我试图做ng-class-odd="odd-row" ng-class-even="even-row"并声明了css，但没有任何变化。这与 ionic-item 标签的工作方式不同吗？

这与我想要的相似（除了我希望每个人都是不同的颜色）：

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

【问题讨论】：

标签： css angularjs ionic-framework ionic background-color

【解决方案1】：

一种解决方案是使用离子列表的 $index 属性。

只是为了给你一些关于 $index 的信息，它给出了当前列表项的索引并从零索引开始。表示第一项的索引为零。

根据您提供的代码，以下代码应该可以工作

<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' : ''" >

它将从列表的第二项开始在每个备用项上添加classA（因为列表的索引从零开始）

请参阅此更新的Plnkr code。

希望这会有所帮助。

【讨论】：