cours Swap css l'intérieur de chaque rangée Bootstrap

Question

S'il vous plaît trouver le code ci-dessous,

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

comme

red green 
    green red 
    red green 

Je veux utiliser ces classes (rouge, vert) pour échanger toutes les lignes bootstrap. Comment pouvons-nous y parvenir?

Answer 1

Vous devez utiliser :nth-child pour cela, plutôt que des cours supplémentaires.

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

Un violon simple, démontrant le principe: https://jsfiddle.net/j24yk5L5/

Answer 2

Vous pouvez utiliser:

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

Puis dans votre 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; 
}