0

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

假设有我的项目，我想将第二个项目符号点更改为红色，我正在使用 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

问候

4

2 回答 2

2

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

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

    离子列表 .item-group:nth-child(2) { 背景颜色：#fff; }

  2. 使用 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>

于 2015-08-25T21:06:48.467 回答
0

我也可以做这样的事情

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;
  };
于 2015-08-27T19:50:34.827 回答