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

【问题标题】：Changing color of item element and last item in ionic list更改离子列表中项目元素和最后一项的颜色
【发布时间】：2015-08-28 03:50:34
【问题描述】：

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

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

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

问候

【问题讨论】：

我们需要您现在使用的代码，至少是 html

标签： angularjs ionic-view

【解决方案1】：

有几种方法可以明智地区分列表设计中的项目。你可以在 CSS 中做到这一点

使用 CSS 选择列表中的第二项，也可以选择第一次、最后一项、每第二项、每第三项..等

离子列表 .item-group:nth-child(2) { 背景颜色：#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>

【讨论】：

【解决方案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;
  };

【讨论】：