带有 ng-repeat 和 table html 的嵌套数组

Question

我想把这个 json 放到 HTML table 中。

    "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"
            }
        ]
    }]

我已经对 SO 进行了大量搜索，但找不到为什么它没有按照我的预期进行。

https://jsfiddle.net/6nh100ca/9/

这就是我所期待的。

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

http://www.bennadel.com/blog/2456-grouping-nested-ngrepeat-lists-in-angularjs.htm

这就是我的

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

Answer 1

根据您的示例数据，

column.columnName 应该是 column.column_name，之后您可以在 data 上有两个 ng-repeat，您实际上将拥有第一个 ng-repeat 在 tbody 上，然后另一个将出现在 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>

Answer 2

如果您想坚持手动创建自己的 <table>，则需要预处理数据对象以适应行逻辑。试试 this fiddle:

在您的控制器中添加：

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

带有 ng-repeat 和 table html 的嵌套数组

nested arrays with ng-repeat and table html

html

javascript

angularjs

ng-repeat

angularjs-ng-repeat