Verschachtelte ng-Wiederholung mit vertikaler Tabelle

Ich habe ein JSON-Array, das X-Nummer Elemente enthält, wobei jedes ein anderes JSON-Array ist. Ich möchte über dieses Array mit einem verschachtelten ng-repeat, etwas wie nested ng-repeat iterieren.Verschachtelte ng-Wiederholung mit vertikaler Tabelle

Mein Problem ist, ich es in einer "vertikalen Tisch" zu tun:

<!-- for the big json --> 
<table ng-repeat = "obj in data "style="width:100%"> 
    <tr> 
    <th>data01</th> 
    <!--for thr first object in the big json --> 
    <tr ng-repeat = "var in obj">{{var}}</tr> 
    </tr> 
    <tr> 
    <!--for the second object in the big json --> 
    <th>data02</th> 
    <tr ng-repeat = "var in obj">{{var}}</tr> 
    </tr> 
</table>

Daten

[ "data01":[{"firstName":"John", "lastName":"Doe"}], "data02":["{"firstName":"Anna", "lastName":"Smith"}], "data03":[{"firstName":"Peter","lastName":"Jones"}] ]

So ist der erste ng-repeat wird für jedes Objekt sein, und die zweite wird Werte inseart auf die "richtige" Seite des Tisches.

Ich kann nicht die richtige Weise finden, die HTML-Elemente zu organisieren, so dass sie in dieser Reihenfolge angezeigt werden. Hier ist eine example für was ich unter "vertikale Tabelle" verstehe.

Quelle

2016-06-16 Itsik Mauyhas

Sie müssen neue json Creat oder Tisch wie Display mit Divs und Klassen erstellen: Tabelle – Vitalii

warum? Ich denke, ich brauche 2 Tische dafür. –

Kann sein, weil die Tabelle hat eine horizontale Struktur :( – Vitalii

Damit Ihre Tabelle die Informationen in dem Format anzuzeigen, die Sie beschreiben, müssen wir einige Annahmen über Ihre Daten machen. Insbesondere gehen wir davon aus, dass Ihre Arrays immer in der gleichen Reihenfolge ausgegeben werden und nur das erste Objekt in jedem Array die Daten enthält, die Sie für diese Tabelle interessieren. Wenn sich Ihre Daten in einer anderen Reihenfolge befinden oder wenn Sie mehrere Objekte in einem Array haben, über das Sie iterieren möchten, wäre das von Ihnen beschriebene Format nicht erreichbar.

In der Praxis ist diese Lösung sehr starr und bricht, wenn sich die Daten in irgendeiner Weise ändern. Dies ist kein normales Design für eckige; Wann immer es möglich ist, sollten Sie versuchen, Daten zu erzeugen, die den Informationen, mit denen Sie arbeiten möchten, näher kommen.

Diese Lösung verwendet eine Kombination aus Arrayzugriff und (key, value) Iterationen, um das Ergebnis zu erzielen.

var app = angular.module('plunker', []); 
 

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.data = [{ 
 
    "data01": [{ 
 
     "firstName": "John", 
 
     "lastName": "Doe" 
 
    }], 
 
    "data02": [{ 
 
     "firstName": "Anna", 
 
     "lastName": "Smith" 
 
    }], 
 
    "data03": [{ 
 
     "firstName": "Peter", 
 
     "lastName": "Jones" 
 
    }] 
 
    }]; 
 
});

<!DOCTYPE html> 
 
<html ng-app="plunker"> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 
    <script> 
 
    document.write('<base href="' + document.location + '" />'); 
 
    </script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script> 
 
    <script src="app.js"></script> 
 
</head> 
 

 
<body ng-controller="MainCtrl"> 
 
    <table style="width:100%"> 
 
    <tr ng-repeat="(key,values) in data[0]"> 
 
     <th>{{key}}</th> 
 
     <td ng-repeat="(key, value) in values[0]">{{value}}</td> 
 
    </tr> 
 
    </table> 
 
</body> 
 

 
</html>

Quelle

2016-06-16 07:43:22 Claies

Funktioniert super! Vielen Dank! –

Mit dieser Lösung werden viele Annahmen gemacht. Immer wenn Sie mit '(Schlüssel, Wert)' anstatt mit den eigentlichen Eigenschaftsnamen arbeiten müssen, sind Sie * sehr eng * mit der Datenausgabe verbunden, und jede Änderung an den Daten wird Ihre Sichtweise beeinträchtigen. Dies ist nicht der beste Weg, um mit Daten in eckigen zu arbeiten. – Claies

Ich weiß nicht, warum iterieren Sie zweimal für obj

<table ng-repeat = "(key,obj) in data "style="width:100%"> 
    <tr> 
     <th>{{key}}</th> 
    </tr> 
    <tr ng-repeat = "var in obj">   
     <td>{{var}}</td> 
    </tr> 
</table>

Quelle

2016-06-16 06:14:34

Das Ergebnis versuchen und veröffentlichen. –

Dies funktioniert, aber es ist keine vertikale Tabelle. –

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_headers - Beispiel für eine vertikale Tabelle. –

Verwenden ng-repeat in td statt tr oder Tisch. Ich hatte das gleiche Problem und schließlich gelang es, das Ergebnis in der vertikalen Tabelle anzuzeigen.

<div id="bdDiv" ng-controller="businessDate" ng-init="init()"> 
    <table> 
     <tr > 
      <th>Country</th> 
      <td ng-repeat="item in response">{{item.type}}</td> 
     </tr> 
     <tr > 
      <th>STAT</th> 
      <td ng-repeat="item in response">{{item.statDate}}</td> 
     </tr> 
     <tr > 
      <th>OTP</th>  
      <td ng-repeat="item in response">{{item.otpDate}}</td> 
     </tr> 
     <tr > 
      <th>LTP</th> 
      <td ng-repeat="item in response">{{item.ltpDate}}</td> 
     </tr> 
    </table> 
</div>

Quelle

2017-03-19 11:35:19

Verschachtelte ng-Wiederholung mit vertikaler Tabelle

Antwort

Verwandte Themen