如何用ng-repeat将动态字段数组值显示在不同列？

这问题我熟！因为字段是动态生成的没法硬编码，咱们得先从返回的数据里提取所有字段的键，再动态生成表头和每一行的列内容。具体做法如下：

第一步：在JS中提取动态字段名 #

当你从后端拿到数据后，先判断数据是否为空，若有数据就用Object.keys()提取第一个对象的所有键，作为列名数组（默认后端返回的每条数据结构一致）：

$scope.displayTrans = function(){
  $http.get("model/selecttrans.php").then(function(response) {
    console.log(response.data);
    $scope.trans = response.data;
    // 提取动态列名，处理空数组的边界情况
    if($scope.trans.length > 0){
      $scope.columns = Object.keys($scope.trans[0]);
    } else {
      $scope.columns = [];
    }
  });
}

第二步：修改HTML模板，动态渲染表头和表格内容 #

把原来只显示整个对象的代码，改成动态生成表头，再遍历列名渲染每一行的对应字段：

<table>
  <!-- 动态生成表头 -->
  <thead>
    <tr>
      <th ng-repeat="col in columns">{{ col }}</th>
    </tr>
  </thead>
  <!-- 动态生成表格内容 -->
  <tbody>
    <tr ng-repeat="tran in trans">
      <!-- 用方括号语法访问动态字段，不能用点语法 -->
      <td ng-repeat="col in columns">{{ tran[col] || '-' }}</td>
    </tr>
  </tbody>
</table>

额外提示 #

• 这里用tran[col]而不是tran.col，因为col是变量，点语法仅支持固定字段名，方括号语法才能通过变量访问对象属性。
• 代码里的|| '-'是为了避免字段值为空时显示空白，你可以根据需求换成其他占位符。
• 如果后端返回的个别数据结构不一致（比如少字段），可以额外做键存在性判断，比如{{ tran.hasOwnProperty(col) ? tran[col] : '-' }}。

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