Angular表格statement-item隔行变色失效：求可行实现方案

首先咱们理清核心问题：你把多个独立数组的内容包裹在.statement-container里渲染到同一个表格单元格，想用ng-class给偶数行加shaded-row类没生效，尝试CSS的:nth-child(even)又因为父容器的存在，只能在每个数组内部单独计数，没法实现跨数组的连续奇偶行着色。下面分两种场景给你具体解决方案：

场景1：每个数组内部的偶数行单独着色 #

如果你的需求是每个数组（比如balanceArray、incomeArrayForReceiptStmt）内部的偶数项单独变色，先排查两个关键点：

1. ng-class的索引逻辑：你写的$index % 2 == 0会给索引0、2、4...的项加类，也就是数组的第1、3、5行（索引从0开始）。如果想给视觉上的偶数行（第2、4、6行）加类，要改成$index % 2 == 1。
2. CSS样式优先级：确保.shaded-row的样式没有被其他更高优先级的样式覆盖，比如检查是否有更具体的选择器（比如.statement-item本身的样式）把背景色覆盖了。

调整后的代码示例：

<div ng-repeat="subItem in balanceArray" 
     ng-class="{'shaded-row': $index % 2 == 1}" 
     class="statement-item">
  {{subItem.ledger_name}}
</div>

如果想用CSS实现这个需求，也可以直接写选择器排除每个容器的标题行：

/* 每个容器里，除了第一个标题行，偶数位置的item着色 */
.statement-container .statement-item:not(:first-child):nth-child(even) {
  background-color: #f5f5f5; /* 替换成你的shaded-row样式 */
}

场景2：跨数组的连续奇偶行着色（整个列连续计数） #

如果需要整个单元格里的所有重复项（不管属于哪个数组）按连续行号奇偶着色，$index就失效了——因为每个ng-repeat的索引都是从0重新开始的。这时候需要用全局计数器来跟踪行号：

步骤1：在控制器中定义全局计数器 #

app.controller('YourController', function($scope) {
  // 初始化行计数器
  $scope.rowCounter = 0;
  
  // 可选：如果表格有多行，渲染新行前重置计数器
  $scope.resetRowCounter = function() {
    $scope.rowCounter = 0;
  };
});

步骤2：在ng-repeat中使用计数器 #

每次渲染一个数据项时，先递增计数器，再判断奇偶：

<!-- Opening balance -->
<div ng-show="balanceArray.length" class="statement-container">
  <div class="statement-item">
    <strong>Balance B/d</strong>
  </div>
  <div ng-repeat="subItem in balanceArray" 
       ng-class="{'shaded-row': rowCounter % 2 == 0}" 
       class="statement-item"
       ng-init="rowCounter = rowCounter + 1">
    {{subItem.ledger_name}}
  </div>
</div>
<!-- End Opening balance -->

<!-- Income -->
<div ng-show="incomeArrayForReceiptStmt.length" class="statement-container">
  <div class="statement-item">
    <strong>Income</strong>
  </div>
  <div ng-repeat="subItem in incomeArrayForReceiptStmt" 
       ng-class="{'shaded-row': rowCounter % 2 == 0}" 
       class="statement-item"
       ng-init="rowCounter = rowCounter + 1">
    {{subItem.ledger_name}}
  </div>
</div>
<!-- End Income -->

如果表格有多个<tr>，记得在每个<tr>渲染前调用resetRowCounter()，避免计数器跨行累计。

关于CSS选择器的替代方案 #

如果不想修改JS逻辑，也可以尝试用CSS兄弟选择器，但局限性很大——只适用于所有.statement-container是同级元素，且标题行不会干扰计数的场景：

.v-align-top.zeroPadding .statement-item:not(:first-child):nth-of-type(even) {
  background-color: #f5f5f5;
}

但这种方法容易因为标题行的存在导致计数混乱，还是推荐用全局计数器的方案更可靠。

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