如何使用ng-repeat正確訪問嵌套元素？

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

]; 

我試圖訪問它像這樣用玉，

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，柯達和獅子）和「技術」

會有（機器人，AI和算法）。我的代碼缺少什麼？

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> 

看到它在行動here。我在這裏使用了Lodash圖書館，但是你可以不用它。