如何通过ng-repeat遍历嵌套数组生成指定格式表格行

你遇到的问题是因为原数据结构是按列分组的，但你期望的是按行展示，所以需要调整遍历逻辑，先确定表格需要的总行数，再按行索引去匹配每列对应位置的元素。

步骤1：在控制器中预处理数据 #

首先我们需要获取所有列的标识，同时计算最长列的长度（也就是表格需要的总行数）：

angular.module('myApp', [])
.controller('MainCtrl', function($scope) {
  $scope.data = {
    "1": [
      { "row": "1", "name": "Acc" },
      { "row": "1", "name": "Eco" },
      { "row": "1", "name": "Mono" },
      { "row": "1", "name": "Mini" }
    ],
    "2": [
      { "row": "2", "name": "Mono" },
      { "row": "2", "name": "Eco" }
    ]
  };

  // 获取所有列的键，用于生成表头和列遍历
  $scope.columnKeys = Object.keys($scope.data);
  
  // 计算表格总行数，取最长列的元素数量
  $scope.totalRows = $scope.columnKeys.reduce(function(maxCount, key) {
    return Math.max(maxCount, $scope.data[key].length);
  }, 0);
});

步骤2：编写HTML模板实现行式遍历 #

接下来在模板中，先遍历列键生成表头，再按行索引遍历生成每一行，每行内再遍历列键获取对应位置的元素：

<div ng-app="myApp" ng-controller="MainCtrl">
  <table border="1">
    <!-- 表头行 -->
    <tr>
      <th ng-repeat="key in columnKeys">{{key}}</th>
    </tr>
    <!-- 数据行：遍历行索引，从0到totalRows-1 -->
    <tr ng-repeat="row in [].constructor(totalRows) track by $index">
      <!-- 每个单元格：取对应列的第$index个元素的name，无元素则显示空 -->
      <td ng-repeat="key in columnKeys">
        {{ data[key][$index] ? data[key][$index].name : '' }}
      </td>
    </tr>
  </table>
</div>

关键逻辑说明 #

• [].constructor(totalRows)：生成一个长度为totalRows的空数组，用来让ng-repeat遍历指定次数的行。
• track by $index：因为数组是空的，需要用索引来跟踪循环，避免Angular报错。
• data[key][$index] ? data[key][$index].name : ''：判断当前列的对应行是否有元素，有则显示name，没有则显示空单元格，兼容所有AngularJS版本。如果你的环境支持ES6+可选链，也可以写成data[key][$index]?.name || ''。

这样就能生成你期望的行式表格了～

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