AngularJS ng-repeat Wörterbuch mit Array-Wert

Question

Ich habe Probleme beim Erstellen einer HTML-Tabelle von einem unbestimmten JSON-Objekt mit dem AngularJS ng-repeat. Was ich erreichen will, ist in einem JSON-Objekt mit dem allgemeinen Format zu füttern:

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

Und der Lage sein, eine Tabelle mit dem Format zu erstellen:

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

Alle Werte im Wörterbuch sind Arrays Gleiche Länge. Die Schlüssel (IE: der tatsächliche Wert von "Mein erster Schlüssel, Mein zweiter Schlüssel") sind ebenfalls unbekannt. Der Inhalt des Arrays ist entweder Strings oder Zahlen. Es gibt kein Mischen von Datentypen innerhalb jedes Arrays. Es ist auch wichtig zu beachten, dass ich nicht wirklich weiß, was die Zeichenfolge ist, die jedem Schlüssel entspricht, wenn der Ausdruck ausgewertet wird.

Mit der ng-repeat = "(Schlüssel, Wert) in myArray" (wobei myArray die obige Datenstruktur in einem gewissen Controller ist) kann die Kopfzeile der Tabelle erfolgreich bauen:

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

Ist das möglich mit meiner gegebenen Datenstruktur und Einschränkungen? Wenn ja, wie greife ich auf die Array-Werte innerhalb des Werts in einer ng-Wiederholung zu? Ein Punkt der Notiz, ich konnte eine Janky-Version des gewünschten Ergebnisses erstellen, indem mehrere einspaltige Tabellen nebeneinander angezeigt (siehe this JSFiddle). Ich suche jedoch eine elegantere Lösung (meine Janky-Version fällt auch auseinander, sobald es zu viele Spalten gibt, um auf eine einzige Zeile zu passen).

Answer 1

Sie können dies tun, indem Sie eine Ihrer Spalten als Richtlinie auswählen, und über sie iterieren, um auf jeder Zeile zu laufen, die eine $index produziert. Dann können Sie die Spalten mithilfe des zuvor erstellten Zeilenleitfadens (alias $parent.$index) erneut durchlaufen.

Beobachtungen: Wenn Ihre gewählte Spalte nicht die richtige Anzahl der Zeilen paßt, wird es die anderen Spalten machen bei der gleichen Marke zu stoppen, so wenn Ihre Führungssäule weniger Zeilen als die andere, Es wird nur diese Anzahl von Zeilen rendern. Stellen Sie daher sicher, dass alle Spalten die gleiche Anzahl an Zeilen haben.

Das folgende Snippet implementiert diese Lösung.

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>