Erstellen Sie eine Tabelle aus JSON-Daten mit anglejs und ng-repeat

Lesezeit: 3 Minuten

Benutzer-Avatar
Benutzer1616332

Ich habe folgende Daten als JSON:

{
  "Workout1": {
    "Name": "First",
    "Rounds": [
      {
        "Exercises": [
          {
            "Name": "Exercise1",
            "Repeat": 10
          },
          {
            "Name": "Exercise2",
            "Repeat": 10
          },
          {
            "Name": "Exercise3",
            "Repeat": 10
          }
        ]
      },
      {
        "Exercises": [
          {
            "Name": "Exercise1",
            "Repeat": 20
          },
          {
            "Name": "Exercise2",
            "Repeat": 20
          },
          {
            "Name": "Exercise3",
            "Repeat": 20
          }
        ]
      },
      {
        "Exercises": [
          {
            "Name": "Exercise1",
            "Repeat": 30
          },
          {
            "Name": "Exercise2",
            "Repeat": 30
          },
          {
            "Name": "Exercise3",
            "Repeat": 30
          }
        ]
      }
    ]
  }
}

und ich möchte es als HTML-Tabelle mit anglejs und ng-repeat anzeigen. sodass ich folgende Tabelle bekomme:

<table class="table">
    <tr>
        <th>Round1</th>
        <th>Round2</th>
        <th>Round3</th>
    </tr>
    <tr>
        <td>10 Exercise1</td>
        <td>20 Exercise1</td>
        <td>30 Exercise1</td>
    </tr>
    <tr>
        <td>10 Exercise2</td>
        <td>20 Exercise2</td>
        <td>30 Exercise2</td>
    </tr>
    <tr>
        <td>10 Exercise3</td>
        <td>20 Exercise3</td>
        <td>30 Exercise3</td>
    </tr>
</table>

für Tabellenvorschau:
http://jsfiddle.net/54pD8/

mein problem, dass die html-tabelle zeilenbasiert arbeitet. Ich kann mit ng-repeat durch meine Runden und dann durch meine Übungen iterieren, aber zum Erstellen einer Tabelle brauche ich immer die erste jeder Übung, dann die zweite jeder Übung und so weiter.

Kann mir jemand bei diesem Problem helfen?

p.s. Wenn Sie eine Idee für ein besseres Layout für diese Daten in JSON haben, sind Ihre Vorschläge willkommen, ich bin neu bei JSON (und Angularjs).

  • Das Beispiel unten wurde aktualisiert, um table und nicht li zu verwenden. Bitte beachten Sie, dass ng:repeat immer noch verwendet wird.

    – Toni Cronin

    6. März 2014 um 16:48 Uhr

Benutzer-Avatar
Toni Cronin

Die Lösung, nach der Sie suchen, finden Sie im offiziellen Tutorial von Angular. In diesem Tutorial werden Telefone aus einer JSON-Datei geladen Verwenden des Angulars $http-Dienstes . Im folgenden Code verwenden wir $http.get So laden Sie eine im Telefonverzeichnis gespeicherte phone.json-Datei:

var phonecatApp = angular.module('phonecatApp', []);   
phonecatApp.controller('PhoneListCtrl', function ($scope, $http) {
 $http.get('phones/phones.json').success(function(data) {
$scope.phones = data;
}); 
$scope.orderProp = 'age';
});

Wir iterieren dann über die Telefone:

<table>
  <tbody ng-repeat="i in phones">
    <tr><td>{{i.name}}</td><td>{{$index}}</td></tr>
    <tr ng-repeat="e in i.details">
       <td>{{$index}}</td>
       <td>{{e.foo}}</td>
       <td>{{e.bar}}</td></tr>
  </tbody>
</table>

  • Ich habe es mit dem gleichen Code versucht und es hat mit einer Liste funktioniert, aber ich brauche eine Tabelle!

    – Benutzer1616332

    6. März 2014 um 12:14 Uhr

  • Danke, genau das habe ich gebraucht!

    – Benutzer1616332

    9. März 2014 um 20:02 Uhr

  • Ich bin mir nicht sicher, ob dies auf ein Update von Angular zurückzuführen ist oder ob es ein Tippfehler war, aber ich glaube, dass ng:repeat ng-repeat sein sollte. Ich erhalte eine Fehlermeldung, wenn ich ng:repeat verwende, aber es funktioniert mit ng-repeat. Ich verwende die Methode, die das externe Google-Skript enthält:

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy