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

Question

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

假设有我的项目，我想将第二个项目符号点更改为红色，我正在使用 angular 和 ionic，我会很感激任何帮助

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

中执行此操作

使用CSSselect列表中的第二项，也可以select第一次，最后一项，每隔一项，每隔三项项目..等

ion-list .item-group:nth-child(2) { 背景色：#fff； }
使用 Angular ng-repeat，该指令还公开了 $index，在 ng-repeat 中，这是列表中项目的索引。

<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 <div ng-class="getClass($index, true)">

和控制器

$scope.getClass = function(index, isLightBullet, list) {
    var theClass = {};
    if(isLightBullet){
       if(index === 0 ){
         theClass = {'vertical-small-line-hided': true};
       }
       else{
         theClass = {'vertical-small-line': true};
       }
    return theClass;
  };

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

Changing color of item element and last item in ionic list

angularjs

ionic-view