Question

我使用ng-repeat访问以下JSON对象。我在第一列上获得了所有名称，而不是分组到不同的列。

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

];

我尝试使用jade，

这样访问它

    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）和“技术”

将拥有（机器人，AI和算法）。我的代码中缺少什么？

Answer 1

你需要＆＃34;转置＆＃34;您的数据形成表格。目前，您的数据更适合在每列中布置多个行，而不是使用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>

在行动here中查看。我在这里使用过Lodash库，但你可以不使用它。

如何使用ng-repeat正确访问嵌套元素？

1 个答案: