在每 Bootstrap 行内交换 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

我想使用这些（红色，绿色）类来交换每 bootstrap 行。我们怎样才能做到这一点？

Answer 1

您可以使用：

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

Answer 2

您应该为此使用 :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;
}

一个简单的fiddle演示原理：https://jsfiddle.net/j24yk5L5/

在每 Bootstrap 行内交换 css 类

Swap css classes inside every Bootstrap row

mixins

bootstrap-sass

angular-ui-bootstrap

bootstrap-4