AngularJS中为ng-repeat的DIV基于动态数据设置交替行背景色

我来帮你搞定这个问题！你已经走对了一半——用DIV实现了正确的3列布局，接下来只需要给交替行加上背景色就行；另外也可以修正TABLE的写法来达到同样效果，两种方案我都给你详细拆解：

方案一：基于你现有的DIV布局（推荐） #

你当前的DIV结构是逐个渲染col-xs-4，要实现整行交替背景，最好先把数据按每3个一组分成“行”，再给每行加样式。这里用AngularJS的过滤器（filter）来拆分数组最方便：

第一步：添加拆分数组的过滤器 #

在你的AngularJS应用里加一个简单的过滤器，把原数组切成每3个元素一组的子数组：

// 假设你的app模块叫myApp，根据实际情况调整
angular.module('myApp', [])
.filter('chunk', function() {
  return function(arr, chunkSize) {
    const result = [];
    for (let i = 0; i < arr.length; i += chunkSize) {
      result.push(arr.slice(i, i + chunkSize));
    }
    return result;
  };
});

第二步：修改HTML结构 #

用过滤器把数据分组后，外层循环渲染“行”，内层循环渲染每个列，同时用ng-class给奇偶行加背景色：

<div class="col-xs-12" ng-if="model.showlist==true">
  <!-- 外层循环渲染每一行，$index是行的索引 -->
  <div class="row" 
       ng-repeat="row in model.names | chunk:3" 
       ng-class="{'gray-background': $index % 2 === 0}">
    <!-- 内层循环渲染每行的3个列 -->
    <div class="col-xs-4 myClass" ng-repeat="item in row"> 
      {{item}} 
    </div>
  </div>
</div>

第三步：添加CSS样式 #

最后写个简单的样式定义灰色背景：

.gray-background {
  background-color: #f5f5f5; /* 你可以换成自己想要的灰色色调 */
}

如果不想写过滤器，也可以直接通过$index计算当前元素所在的行号，给每个列单独加背景（不过整行加更美观）：

<div class="col-xs-12" ng-if="model.showlist==true">
  <div class="col-xs-4 myClass" 
       ng-repeat="x in model.names" 
       ng-class="{'gray-background': Math.floor($index/3) % 2 === 0}"> 
    {{x}} 
  </div>
</div>

方案二：修正TABLE的写法 #

你之前的TABLE问题出在所有<td>都放在同一个<tr>里，所以全部挤在一行。只要把每3个<td>放在一个<tr>里就能解决，同样可以用上面的chunk过滤器：

<table class="table" ng-if="model.showlist==true">
  <tr ng-repeat="row in model.names | chunk:3" 
      ng-class="{'gray-background': $index % 2 === 0}">
    <td class="col-xs-4 myClass" ng-repeat="item in row"> {{item}} </td>
  </tr>
</table>

CSS样式和方案一完全一样，这样TABLE的每行也会有交替背景，布局也正确了。

两种方案都能实现你要的效果：

• a b c（灰色背景）
• s s ww
• ee rrgf fdf（灰色背景）
• dfdf dfdf ffd

内容的提问来源于stack exchange，提问作者sai