Question

我有一个动态离子列表，我想更改列表中特定项目的颜色，

假设有我的物品，我想将第二个子弹点改为红色，我正在使用角度和离子，我会感激任何帮助

html代码就是这个

<ion-list class="list">
<ion-item ng-repeat="topic in topics">
<div class="item-group">
    <div class="left-group">
     <div class="vertical-small-line"></div>
     <div class="bullet"></div> 
     <div class="vertical-line"></div>
    </div>
   <div class="right-group">
     <h3><a href="">{{topic.title}}</a></h3>
     <p class="block-ellipsis">{{topic.summary}}</p>
    </div>
</ion-item>
</ion-list>

http://i.stack.imgur.com/nLHjD.png

此致

Answer 1

有几种方法可以区分列表设计中的项目。您可以在CSS中执行此操作

使用CSS选择列表中的第二项，也可以选择第一个时间，最后一个项目，每隔一个项目，每隔一个项目..等等

ion-list .item-group：nth-child（2）{ background-color：#fff; }
使用Angular ng-repeat，此指令还在ng-repeat中公开$ index，这是列表中项目的索引。

<ion-list class="list"> <ion-item ng-repeat="topic in topics"> <div class="item-group" ng-class="{'special-class': $index == 1}"> <div class="left-group"> <div class="vertical-small-line"></div> <div class="bullet"></div> <div class="vertical-line"></div> </div> <div class="right-group"> <h3><a href="">{{topic.title}}</a></h3> <p class="block-ellipsis">{{topic.summary}}</p> </div> </ion-item> </ion-list>

Answer 2

我也可以做这样的事情

HTML alert()

和控制器

<div ng-class="getClass($index, true)">

更改项目元素的颜色和离子列表中的最后一项

2 个答案: