AngularJS用ng-repeat填充表格遇问题：已尝试unique过滤器仍无效

我来帮你排查这个AngularJS表格渲染的问题～先看你代码里的几个明显问题，再给你调整方案：

首先分析现有代码的问题 #

1. 表头重复渲染：你把<th>的循环放在了<tr ng-repeat="elements in rawData.value">里面，这会导致每一行数据前面都生成一套表头，完全不符合表格的结构逻辑。
2. unique过滤器使用错误：AngularJS原生并没有内置unique过滤器，你用的应该是第三方的angular-filter库吧？就算引入了，你在单个elements对象的键值对里用unique:'key'也没意义——单个对象的键本来就是唯一的，你需要的是从所有数据行里提取所有唯一的表头字段，而不是在单行里过滤。
3. 数据单元格遍历逻辑不对：ng-repeat="element in elements"遍历对象时，虽然能拿到值，但没法保证每个单元格和表头一一对应，容易出现顺序混乱的问题。

修正方案（推荐控制器预处理数据） #

这种方式更清晰，也避免模板里过滤器的各种坑：

第一步：在控制器里提取唯一表头

先处理从接口拿到的数据，把所有行的字段收集起来去重，得到表头数组：

angular.module('yourApp', [])
.controller('fetchData', function($scope, $http) {
  // 替换成你的实际接口地址
  $http.get('/your-api-endpoint')
  .then(function(response) {
    $scope.rawData = response.data;
    // 收集所有唯一的表头字段
    const allHeaders = new Set();
    $scope.rawData.value.forEach(row => {
      Object.keys(row).forEach(key => allHeaders.add(key));
    });
    // 转成数组供模板使用
    $scope.tableHeaders = Array.from(allHeaders);
  })
  .catch(function(err) {
    console.error('数据获取失败：', err);
  });
});

第二步：修改表格模板结构

把表头和数据行分开，表头只渲染一次，数据行根据表头数组对应渲染单元格：

<table class="table" ng-controller="fetchData">
  <!-- 单独的表头行 -->
  <tr>
    <th ng-repeat="header in tableHeaders">
      {{ header }}
    </th>
  </tr>
  <!-- 数据行循环 -->
  <tr ng-repeat="row in rawData.value">
    <td ng-repeat="header in tableHeaders">
      {{ row[header] }}
    </td>
  </tr>
</table>

如果你坚持要用unique过滤器的话 #

要先确保你已经引入了angular-filter库，并且在模块里注入了依赖：

// 引入库后，模块注入angular.filter
angular.module('yourApp', ['angular.filter'])

然后模板里可以这样处理表头（但还是不如控制器预处理直观）：

<table class="table" ng-controller="fetchData">
  <tr>
    <!-- 先把所有行的键值对扁平化，再去重提取key -->
    <th ng-repeat="item in rawData.value | flatten | unique:'key'">
      {{ item.key }}
    </th>
  </tr>
  <tr ng-repeat="row in rawData.value">
    <td ng-repeat="item in rawData.value | flatten | unique:'key'">
      {{ row[item.key] }}
    </td>
  </tr>
</table>

额外提醒 #

• 确认你的rawData.value是对象数组的结构，比如[{name: 'xxx', age: 18}, {name: 'yyy', age: 20}]，如果结构不对，循环逻辑也要跟着调整。
• 如果用第三方过滤器，一定要确认库已经正确引入，不然会报错。

内容的提问来源于stack exchange，提问作者Lars Rødal