交換CSS類

Question

請找到下面的代碼，

$scope.datas = [{name:'AB', age:1}, {name:'BC', age:2}, 
{name:'CD', age:3}, {name:'EF', age:4}, {name:'GH', age:5}, 
{name:'IJ', age:6}] 

<div ng-repeat="data in datas" class="col-xs-6"> 
    <span>{{data.name}}</span> 
    <span>{{data.age}}</span> 
</div> 

.red{ 
    background-color: red; 
    } 

.green{ 
background-color: green; 
} 

像

red green 
    green red 
    red green 

我想用這些（紅，綠）班的每一個自舉行交換。我們怎樣才能做到這一點？

Answer 1

您應該使用:nth-child對於這一點，而不是額外的類。

div { 
    /* formatting for the 「normal」 elements goes here (red) 
    outline: 1px solid red; 
} 

div:nth-child(4n+2), // select every 2nd 
div:nth-child(4n+3) { // and 3rd out of each 「group」 of 4 elements 
    /* formatting for the 「special」 elements, based on their position */ 
    outline: 1px solid green; 
} 

一個簡單的小提琴演示原理：https://jsfiddle.net/j24yk5L5/

Answer 2

你可以使用：

<div ng-repeat="data in datas" class="col-xs-6" ng-class="$index % 2 == 0 ? 'even' : 'odd'"> 
    <span>{{data.name}}</span> 
    <span>{{data.age}}</span> 
</div> 

然後在你的CSS：

.even span:nth-child(even), 
.odd span:nth-child(odd){ 
    background-color: red; 
} 
.even span:nth-child(odd), 
.odd span:nth-child(even){ 
    background-color: green; 
}