AngularJS动态分组表格table-striped样式重复问题求解

在使用AngularJS构建包含分组与子分组结构的表格时，想要实现类似原生table-striped的隔行条纹效果，但当前代码会出现部分行颜色重复的问题，无法正常显示交替变色的条纹。

当前使用代码 #

HTML代码 #

<tbody ng-repeat="a in group">
<tr ng-class-odd="'striped'">
<td>{{a.Name}}</td>
<td></td>
</tr>
<tr ng-repeat="x in records" ng-class-odd="'striped'">
  <td>{{x.Name}}</td>
  <td>{{x.Country}}</td>  
</tr>
</tbody>

JavaScript代码 #

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.records = [
    {
      "Name" : "Alfreds Futterkiste",
      "Country" : "Germany"
    },
    {
      "Name" : "Berglunds snabbköp",
      "Country" : "Sweden"
    },
    {
      "Name" : "Centro comercial Moctezuma",
      "Country" : "Mexico"
    },
    {
      "Name" : "Ernst Handel",
      "Country" : "Austria"
    }
  ],
  $scope.group = [
    {
      "Name" : "A"
    },
    {
      "Name" : "B"
    },
    {
      "Name" : "C"
    },
    {
      "Name" : "D"
    }
  ]
});

已尝试但无效的方法 #

• 使用ng-style，在控制器中创建接收$index和$parent.$index的函数，出现循环重复问题
• 用CSS选择器tbody tr:nth-child(even/odd)，仍存在颜色重复情况
• 尝试AngularJS内置的$first%2 === 0、$last%2 === 0、$even、$odd属性，均未解决问题

可行解决方案 #

问题根源在于每个<tbody>都是独立的ng-repeat块，内部的行索引（$index）会从0重新开始计算，导致每个分组内的行奇偶判断重复，进而出现颜色重复。解决思路是维护一个全局的行计数器，跨<tbody>累计所有行的序号，再根据全局序号的奇偶性设置条纹类。

方法实现 #

1. 无需修改控制器，直接在HTML中通过ng-init维护全局行索引：

<tbody ng-repeat="a in group">
  <!-- 分组标题行 -->
  <tr ng-init="globalRowIndex = (globalRowIndex || 0) + 1" 
      ng-class="{ 'striped': globalRowIndex % 2 === 1 }">
    <td>{{a.Name}}</td>
    <td></td>
  </tr>
  <!-- 分组子行 -->
  <tr ng-repeat="x in records" 
      ng-init="globalRowIndex = (globalRowIndex || 0) + 1"
      ng-class="{ 'striped': globalRowIndex % 2 === 1 }">
    <td>{{x.Name}}</td>
    <td>{{x.Country}}</td>  
  </tr>
</tbody>

2. 定义条纹样式（可根据需求调整颜色）：

.striped {
  background-color: #f5f5f5;
}

原理说明 #

• globalRowIndex作为全局变量，每次渲染行时通过ng-init累加，确保整个表格的行序号是连续递增的
• 通过globalRowIndex % 2 === 1判断当前行是否为奇数行，从而添加条纹类，实现整个表格的隔行交替变色

内容的提问来源于stack exchange，提问作者Ernandes Dee Pereira