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

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

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

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

---

我能用AngularJS和ng重复做吗？或者以任何其他方式，不会强迫我显式地循环每个人的“花费”元素

以常规方式构建阵列：

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

使用控制器中的人员列表：

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

---

这是神奇的，来自于

对于更标准的解决方案，您需要知道使用的阵列的最大长度是多少

我提议：

$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>

{{person.name}
{{person.spend[count]}

注意，在上述解决方案中，您可以构造将显示在结果表上的空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>

{{person.name}
{{person.spend[count]}

每个人花费的数组长度是否相等？否，数组可能有不同的长度，我发现最有问题的部分和内容是什么？如果我把{{n}}放在那里，那么我会为每个人得到person.spend元素，所以你能指出它应该有什么内容来呈现我想要的吗？CSS是这个答案的关键我很抱歉，错误的拷贝过去了。这应该更好（不适用于IE…）好吧，这个解决方案很有效，但我觉得它有点像黑客，不允许我进一步玩桌子的样式（例如，应用bootstrap类table striped会导致垂直条带，而不是水平条带；而且，如果使用bootstrap table类，列不会填满整个表）…因此我仍然怀疑它是否真的是“正确的”当然，这是一种黑客行为，但请记住TR=table row，然后期望它表现为列是很困难的。

<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>

<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>