如何使用 Angularjs 在动态大小的表中创建表头答案

【问题标题】：How to create table headers in a dynamically sized table using Angularjs如何使用 Angularjs 在动态大小的表中创建表头
【发布时间】：2016-02-24 08:45:14
【问题描述】：

我想创建一个动态的高度和宽度表格，但表格标题有问题。

<td> 元素与 ng-repeater 一起显示得很好

<tr ng-repeat="set in currFormData.volume track by $index">
  <td ng-repeat="repSpace in set track by $index">
    {{repSpace}}
  </td>
</tr>

但我想要一个包含1, 2, 3, 4... 的<th> 行，并且它必须随着表格的调整而调整。我正在寻找这样的东西，它只看我模型的第二层 1 次：

<tr>
  <th ng-repeat="repSpace in set in currFormData.volume track by $index">{{$index + 1}}</th>
</tr>

这是我的$scope 模型：

$scope.currFormData = {"date" : "", "volume": [
    [[1,135],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],
    [[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],
    [[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],
    [[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]]
] };

我怎样才能做到这一点？我愿意改变我的模型。

【问题讨论】：

标签： angularjs angularjs-ng-repeat html-table

【解决方案1】：

假设你的“卷”中的每个“集合”都等长：

HTML：

<th ng-repeat="i in getArray(currFormData.volume[0].length) track by $index">{{$index + 1}}</th>

控制器：

$scope.getArray = function (length) {
    return new Array(length);
}

否则：

HTML：

<th ng-repeat="i in getLongestArray(currFormData.volume) track by $index">{{$index + 1}}</th>

控制器：

$scope.getLongestArray = function (arrayOfArrays) {
    var longest: number = 0;
    for (var i: number = 0; i < arrayOfArrays.length; i++) {
        if (arrayOfArrays[i].length > longest) {
            longest = arrayOfArrays[i].length;
        }
    }
    return (new Array(longest));
}

【讨论】：