交换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; 
}