Swap CSS-Klassen innerhalb jeder Bootstrap Reihe

Question

Bitte den Code unten finden,

$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; 
} 

wie

red green 
    green red 
    red green 

Ich möchte diese (rot, grün) Klassen verwenden alle Bootstrap-Reihen zu tauschen. Wie können wir das erreichen?

Answer 1

Sie :nth-child dafür verwendet werden sollen, anstatt zusätzliche Klassen.

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

Eine einfache Geige demonstriert das Prinzip: https://jsfiddle.net/j24yk5L5/

Answer 2

könnten Sie verwenden:

<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> 

Dann in Ihrem 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; 
}