Изменение цвета элемента элемента и последнего элемент в ионном списке

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

1. Использование CSS выберите второй пункт в списке, можно также выбрать первый раз, последний пункт, каждый второй элемент, каждый третий пункт .. и т.д.

   иона -list .item-group: nth-child (2) { background-color: #fff; }

2. Использование 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; 
    };