Javascript 带有ng repeat和表格html的嵌套数组

我想把这个json放到一个HTML表中

    "columns" : [ 
    {
        "id" : 0,
        "column_name" : "Column 1",
        "cards" : [ 
            {
                "id" : 0,
                "task" : "Task 1"
            }, 
            {
                "id" : 1,
                "task" : "Task 2"
            }
        ]
    }, 
    {
        "id" : 1,
        "column_name" : "Column 2",
        "cards" : [ 
            {
                "id" : 0,
                "task" : "Task 3"
            }
        ]
    }]

我已经做了相当多的搜索，所以不能找到为什么它没有做我所期望的

这就是我所期待的

**Column 1 | Column 2**
Task 1   | Task 3
Task 2   | 

这就是我所拥有的

    <table >
        <thead >
            <tr>
                <th ng-repeat="column in entity.columns">{{column.column_name}}</th>
            </tr>
        </thead>
        <tbody ng-repeat="column in entity.columns" >
            <tr ng-repeat="card in column.cards">
                <td >{{card.task}}</td>
            </tr>
        </tbody>
    </table>

{{column.column_name}
{{card.task}

列。columnName

应该是

列。column_name

根据您的示例数据，在那里，您可以在

数据上有两个
ng repeat
，在
tbody
上实际有第一个
ng repeat
，然后另一个将出现在
tr
上。当我有小数据集时，我更喜欢这种方法。对于较大的数据集，@Tiago给出的答案很好

<table >
    <thead >
        <tr>
            <th ng-repeat="column in entity.columns">{{column.columnName}}</th>
        </tr>
    </thead>
    <tbody ng-repeat="column in entity.columns" >
        <tr ng-repeat="card in column.cards">
            <td >{{card.task}}</td>
        </tr>
    </tbody>
</table>


{{column.columnName}
{{card.task}
如果您想继续手动创建自己的
，则需要预处理数据对象以适应行逻辑。尝试以下方法：

将此添加到控制器中：

 $scope.rowColumns = [];
    $scope.columns.forEach(function(column, columnIndex){
        column.cards.forEach(function (card, rowIndex){
            if (!$scope.rowColumns[rowIndex])
                $scope.rowColumns[rowIndex] = [];
            $scope.rowColumns[rowIndex][columnIndex] = card;
        });
    });
    console.log($scope.rowColumns);

然后将其添加到html中：

   <tr ng-repeat="row in rowColumns">
      <td ng-repeat="cell in row">
           {{cell.task}}
      </td>
   </tr>


{{cell.task}
您应该查看一个表指令，如
ui-grid
。比自己定制桌子好得多的是，你看起来像那样，就是这样。只是我一直在跳，不必使用控制器重新排列数据。现在看起来有点天真。谢谢你的帮助。不幸的是，这不是我所期望的。它显示了以下内容|第一栏|第二栏| | | | | | | |任务1 | | | | | |任务2 | | | |任务3 | | |我本来以为任务3会在第二栏我一点也不喜欢这样。你每次都在重复tbody，这是不可能的sense@iberbeu您看到的问题是，它的有效HTML。。我知道重复一段时间是你不同意的？你的答案实际上是正确的，所以我将取消否决票。无论如何，我想知道如何在不重复tbody部分的情况下做到这一点，因为有时它只是不需要的，如果不需要，重复就没有意义needed@iberbeu但这需要另一个过滤器，或手动过滤，但是的，我注意到了您的观点，对于大型数据集，我们应该在渲染之前重新格式化/过滤数据（使用single
ng repeat
）否则对于较小的数据，我更喜欢我的方法，因为我认为它不会损害页面上的任何内容。