AngularJS ng-repeat字典與數組值

Question

我遇到麻煩，使用AngularJS ng-repeat從不確定的JSON對象創建HTML表。我想做到的是在一個JSON對象飼料與一般格式爲：

{ 
    "My First Key" : [0, 1, 2 ..., n], 
    "My Second Key" : ["Val0", "Val1", ..., "Valn"], 
    ... 
    "My Nth Key" : [0, 1, 2 ..., n] 
} 

而且能夠創建一個表格式：

My First Key | My Second Key | ... | My Nth Key | 
    0  | "Val0"  | ... |  0  | 
    1  | "Val1"  | ... |  1  | 
    ...  |  ...  | ... | ...  | 
    n  | "Valn"  | ... |  n  | 

在字典中的所有值的數組等長。密鑰（IE：「我的第一個密鑰，我的第二個密鑰」的實際值）也是未知的。數組的內容是字符串或數字。每個數組中不存在數據類型的混合。同樣重要的是要注意，當表達式計算結果時，我實際上並不知道每個鍵對應的字符串是什麼。

使用納克重複=「（鍵，值）myArray的」（其中myArray的是在一些控制器中的上述數據結構）可以成功地建立該表的標頭：

<table ng-controller="myController"> 
    <tr> 
     <th ng-repeat="(key, value) in myArray">{{key}}</th> 
    </tr> 
    <tr ng-repeat="???"> 
     <td>{{data}}</td> 
    </tr> 
</table> 

這是可能與我的數據結構和限制？如果是這樣，我如何訪問ng-repeat中值的數組值？ 需要注意的一點是，我可以通過將多個單列表格並排顯示（請參閱this JSFiddle）來創建期望結果的簡潔版本。不過，我正在尋找一個更優雅的解決方案（只要有太多的列可以放在一條線上，我的Janky版本也會開始崩潰）。

Answer 1

您可以通過選擇一個列作爲指導，並遍歷它們以在每一行上生成$index。那麼，您可以使用之前創建的行指南（又名$parent.$index）重新迭代列。

觀察：如果您choosen列不適合行適當數量，就會使其他列停在相同的標誌，所以 如果你的導柱比別人少行，它會渲染 這個行數。因此，請確保所有列具有相同的行數 。

以下代碼片段實現了此解決方案。

angular.module('myApp', []) 
 
    .controller('myController', function ($scope){ 
 
    \t $scope.myArray = { 
 
      "My First Key" : [0, 1, 2, 'n'], 
 
      "My Second Key" : ["Val0", "Val1", 'Val2', 'Valn'], 
 
      "My Nth Key" : ['a0', 'a1', 'a2' , 'an'] 
 
     }; 
 
    
 
     $scope.pivotKey = Object.keys($scope.myArray)[0]; 
 
    }); 
 

 
angular.element(document).ready(function() { 
 
    angular.bootstrap(document, ['myApp']); 
 
});

table{ 
 
    border-collapse: collapse; 
 
} 
 
td,th { 
 
    padding: 2px 4px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<table ng-controller="myController" border="1"> 
 
    <tr> 
 
    <th ng-repeat="(column, rows) in myArray">{{ column }}</th> 
 
    </tr> 
 
    <tr ng-repeat="(rowIndex, rowValue) in myArray[pivotKey]"> 
 
    <td ng-repeat="value in myArray"> 
 
     {{ value[rowIndex] }} 
 
    </td> 
 
    </tr> 
 
</table>