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

以正常方式构建数组：

<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

Answer 2

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

我建议：

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

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

2 个答案: