首页 文章

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

提问于
浏览 次
1

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

css angularjs ionic-framework ionic background-color

1 回答

  • 2

    一种解决方案可以是使用离子列表的 $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 .

    希望这会有所帮助 .

    回复于

相关问题