使用 ng-repeat 每列具有不同行数的表

Question

在我的控制器中，我有一个数据结构：

this.people = [
    {name: person1, spent: [1, 3, 5,...]},
    {name: person2, spent: [4, 57, 3,...]},
    ...
];

我想以某种方式将该数据提取到一个类似表格的结构中，名称是列，所用表格的元素是相应列的行（其中每个人的列可以具有不同的长度）：

person1 | person2
1       | 4
3       | 57
5       | 3

我可以用 AngularJS 和 ng-repeat 以某种方式做到这一点吗？或者以任何其他方式不会迫使我明确地循环遍历每个人的“花费”元素？

Answer 1

对于更标准的解决方案，您需要知道已用数组的最大长度是多少。

我提议：

$scope.maxSpent = function(){
    var max = [];
    for (var i in $scope.people){
        var p = $scope.people[i];
        if (p.spent.length > max.length){
            max = p.spent;
        }
    }
    return max;
}

这将经常被重新计算，您可能会更聪明，具体取决于您获取人员数组的方式。

完成后，您可以构建您想要的表格：

<table>
    <tr>
        <td ng-repeat="person in people">{{person.name}}</td>
    </tr>
    <tr ng-repeat="n in maxSpent()" ng-init="count = $index">
        <td ng-repeat="person in people">{{person.spent[count]}}</td>
    </tr>
</table>

Nota-Bene，在上述解决方案中，您可以构建将出现在结果表上的空 TD，由您决定不显示它们：

<table>
    <tr>
        <td ng-repeat="person in people">{{person.name}}</td>
    </tr>
    <tr ng-repeat="n in maxSpent()" ng-init="count = $index">
        <td ng-repeat="person in people" ng-if="person.spent[count]">{{person.spent[count]}}</td>
    </tr>
</table>

Answer 2

以正常方式构建您的数组：

<table>
    <tr ng-repeat="person in people">
        <td>{{person.name}}</td>
        <td ng-repeat="n in person.spent">{{n}}</td>
    </tr>
</table>

在你的 CSS 中：

tr { display: block; float: left; }
th, td { display: block;}

在控制器中包含您的人员列表：

$scope.people = [
    {name: "person1", spent: [1, 3, 5]},
    {name: "person2", spent: [4, 57, 3,12]}
];

这很神奇，来自here