如何用ng-repeat遍历二维数组按列取元素生成表格？

好问题！其实你有两种可行的方案——既可以完全靠ng-repeat配合模板逻辑实现，也可以先在控制器里转置数组让模板更清爽，我给你详细拆解：

方案1：纯模板实现（无需修改原数组） #

这种方案不需要改动你的inputData，直接在模板里通过两层ng-repeat实现行和列的遍历：

步骤1：在控制器中计算最大子数组长度 #

首先要确定需要生成多少行，也就是所有子数组里最长的那个长度，在控制器里添加：

// 计算所有子数组的最大长度，处理空数组的边界情况
$scope.maxRowCount = $scope.inputData.length > 0 
  ? Math.max(...$scope.inputData.map(subArr => subArr.length)) 
  : 0;

步骤2：模板中嵌套ng-repeat #

外层循环遍历行数（用空数组占位），内层循环遍历每个子数组，取对应索引的元素：

<table border="1">
  <!-- 外层循环：生成每一行，对应子数组的索引 -->
  <tr ng-repeat="dummy in [].constructor(maxRowCount) track by $index">
    <!-- 内层循环：遍历每个子数组，取当前行索引对应的元素 -->
    <td ng-repeat="subArr in inputData track by $index">
      {{ subArr[$parent.$index] || '' }}
    </td>
  </tr>
</table>

这里的关键是用$parent.$index获取外层循环的行索引（因为内层ng-repeat会覆盖当前作用域的$index），|| ''是为了处理子数组长度不一致时出现的undefined，显示空字符串更友好。

方案2：控制器中转置数组（模板更简洁） #

如果觉得模板里的逻辑有点绕，也可以先在控制器里把inputData转置成“行优先”的数组，再用ng-repeat直接遍历：

步骤1：控制器中转置数组 #

$scope.transposedData = [];
if ($scope.inputData.length > 0) {
  const maxLen = Math.max(...$scope.inputData.map(subArr => subArr.length));
  // 遍历每个索引，生成转置后的行
  for (let i = 0; i < maxLen; i++) {
    $scope.transposedData.push(
      $scope.inputData.map(subArr => subArr[i] || '')
    );
  }
}

步骤2：模板中直接遍历转置后的数组 #

模板逻辑就非常直观了：

<table border="1">
  <tr ng-repeat="row in transposedData track by $index">
    <td ng-repeat="val in row track by $index">{{ val }}</td>
  </tr>
</table>

方案对比 #

• 纯模板方案：适合不想改动原数据的场景，缺点是模板需要处理$parent和空值，逻辑稍复杂
• 控制器转置方案：模板更简洁易读，逻辑集中在控制器，适合后续需要复用转置后数据的场景

内容的提问来源于stack exchange，提问作者Matija Župančić