Question

我在使用AngularJS ng-repeat从不确定的JSON对象创建HTML表时遇到了麻烦。我想要实现的是使用通用格式提供JSON对象：

{
  "My First Key" : [0, 1, 2 ..., n],
  "My Second Key" : ["Val0", "Val1", ..., "Valn"],
  ...
  "My Nth Key" : [0, 1, 2 ..., n]
}

并且能够创建一个格式为

的表格

My First Key | My Second Key | ... | My Nth Key |
     0       |    "Val0"     | ... |     0      |
     1       |    "Val1"     | ... |     1      |
    ...      |      ...      | ... |    ...     |
     n       |    "Valn"     | ... |     n      |

字典中的所有值都是相等长度的数组。键（IE：“我的第一把钥匙，我的第二把钥匙”的实际值）也是未知的。数组的内容是字符串或数字。每个数组中没有混合数据类型。同样重要的是要注意，当表达式求值时，我实际上不会知道每个键对应的字符串是什么。

在myArray中使用ng-repeat =“（键，值）”（其中myArray是某个控制器中的上述数据结构）可以成功构建表的标题：

<table ng-controller="myController">
    <tr>
        <th ng-repeat="(key, value) in myArray">{{key}}</th>
    </tr>
    <tr ng-repeat="???">
        <td>{{data}}</td>
    </tr>
</table>

这可能与我给定的数据结构和限制有关吗？如果是这样，我如何在ng-repeat中访问值内的数组值？值得注意的是，通过将几个单列表并排显示，我能够创建所需结果的janky版本（参见this JSFiddle）。然而，我正在寻找一个更优雅的解决方案（只要有太多列适合单行，我的janky版本也会开始崩溃。）

Answer 1

您可以选择其中一列作为指南，然后对它们进行迭代，以便在每行上行走$index。那么，您可以使用之前创建的行指南（又名$parent.$index）再次迭代列。

观察：如果您选择的列不符合正确的行数，则会使其他列停在同一标记处，因此如果您的指南列的行数少于其他列，则会呈现只是这个行数。因此，请确保所有列都具有相同的列行数。

以下代码段实现了此解决方案。

＆＃13;

angular.module('myApp', [])
    .controller('myController', function ($scope){
    	$scope.myArray = {
          "My First Key" : [0, 1, 2, 'n'],
          "My Second Key" : ["Val0", "Val1", 'Val2', 'Valn'],
          "My Nth Key" : ['a0', 'a1', 'a2' , 'an']
        };
  
        $scope.pivotKey = Object.keys($scope.myArray)[0];
    });

angular.element(document).ready(function () {
  angular.bootstrap(document, ['myApp']);
});

＆＃13;

table{
  border-collapse: collapse;
}
td,th {
  padding: 2px 4px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<table ng-controller="myController" border="1">
  <tr>
    <th ng-repeat="(column, rows) in myArray">{{ column }}</th>
  </tr>
  <tr ng-repeat="(rowIndex, rowValue) in myArray[pivotKey]">
    <td ng-repeat="value in myArray">
      {{ value[rowIndex] }}
    </td>
  </tr>
</table>

＆＃13;

具有数组值的AngularJS ng-repeat字典

1 个答案: