如何正确地使用ng-重复访问嵌套元素？

Question

我有下面的JSON对象要使用ng-重复进行访问。我得到了第一列的所有名称，而不是分组为不同的列。

$scope.tableItems = [
{
  "title": "BUILDING ID",
  "subtitle": [
    {
        "name": "Nexon"
    },
    {
        "name": "Kodak"
    },
    {
        "name": "Lion"
    }
  ]
},
{ 
  "title": "TECHNOLOGY",
  "subtitle": [
    {
        "name": "Robotic"
    },
    {
        "name": "AI"
    },
    {
        "name": "Algorithm"
  ]
}

];

我试着用翡翠这样的方式访问它，

    table
        thead
            tr
                th(ng-repeat = "x in tableItems") {{ x.title }} //- get BUILDING ID and TECHNOLOGY
        tbody(ng-repeat = "x in tableItems")  //- get all the NAMEs
            tr(ng-repeat = "(key, value) in x.subtitle")
                td {{ value.name }}

结果回来了

BUILDING ID                 TECHNOLOGY

Nexon

Kodak

Lion

Robotic

AI

Algorithm

我希望它能够根据表头打印表，所以在

“建筑ID”将只有3个项目(Nexon，Kodak和Lion)和“技术”

将会有(机器人，人工智能和算法)。我的密码里少了什么？

Answer 1

您需要“转换”您的数据以形成表格网格。目前，在使用ng-repeat生成表单元格时，您的数据更适合每列布局多行，而不是每行多列。

提取标题，并修改每一行的所有列：

$scope.tableHeadings = _.pluck($scope.tableItems, "title");
    var T = {};
    _.each($scope.tableItems, function (item, colind) {
        _.each(item.subtitle, function (row, rowind) {
            if (!_.has(T, 'r' + rowind)) {
                T['r' + rowind] = [];
            }
            T['r' + rowind].push({
                "name": row.name
            });
        });
    });

    $scope.tableRows = T;

然后在HTML中这样使用它：

<table>
    <thead>
        <th ng-repeat="heading in tableHeadings">{{heading}}</th>
    </thead>
    <tbody>
        <tr ng-repeat="(key, columns) in tableRows">
            <td ng-repeat="col in columns">{{col.name}}</td>
        </tr>
    </tbody>
</table>

在行动中看到它这里。我在这里用过洛达什图书馆，但你不用它也行。