AngularJS ng-repeat dictionary with array value

Question

AngularJS ng-repeatを使用して不確定なJSONオブジェクトからHTMLテーブルを作成する際に問題が発生しました。

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

そして形式の表を作成することができる：私が達成したいことは、一般的なフォーマットでJSONオブジェクトに供給することである

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

辞書内のすべての値はの配列です等しい長さ。キー（IE：My First Key、My Second Keyの実際の値）も不明です。配列の内容は、文字列または数値のいずれかです。各配列内にデータ型が混在することはありません。また、式が評価されるときに各キーに対応する文字列が実際にはわからないことに注意することも重要です。

成功テーブルのヘッダを構築することができ（MyArrayという、いくつかのコントローラで上記のデータ構造である）「MyArrayというに（キー、値）が」NG-リピート=使用：

<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で値の中の配列の値にアクセスするにはどうしたらいいですか？ 私は、いくつかの単一列のテーブルを並べて表示することで、所望の結果のjankyバージョンを作成することができました（this JSFiddle参照）。しかし、私はよりエレガントなソリューションを探しています（私のjankyバージョンも、1行に収まるように列が多すぎるとすぐに分かりにくくなります）。

Answer 1

ガイドの1つを選択して、各行を歩き回って$indexを生成することで、これを行うことができます。それで、以前作成した行ガイド（別名$parent.$index）を使用して列を再度反復することができます。

観察：あなた選びだし列が行の適切な数に合わない場合はご案内の列が他より少ない行を持っている場合、それはとても 、同じマークで停止し、他の列を行います、 をこの行数だけ表示します。そのため、すべての列に同じ行数の があることを確認してください。

次のスニペットは、このソリューションを実装しています。

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>