Question

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

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

希望这会有所帮助。

Ionic-Framwork / Angular：具有交替的离子项背景颜色和集合重复

1 个答案: