使用 angularjs 和 ng-repeat 从 JSON 数据创建表 [英] Create Table from JSON Data with angularjs and ng-repeat

问题描述

我有以下 JSON 数据:

I have the following data as 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
          }
        ]
      }
    ]
  }
}

我想将它显示为带有 angularjs 和 ng-repeat 的 html 表.以便我得到下表:

and I want to display it as a html table with angularjs and ng-repeat. so that I get the following table:

<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>

表格预览:http://jsfiddle.net/54pD8/

我的问题是 html 表是基于行的.我可以用 ng-repeat 迭代我的回合，然后通过我的练习但是为了创建表格，我总是需要每个练习的第一个，然后是每个练习的第二个，依此类推.

my problem that the html table is working row-based. I can iterate with ng-repeat through my Rounds and then through my excercises but for creating a table I need always the first of each exercises then the second of each exercises and so on.

有人可以帮我解决这个问题吗?

Can someone help me with this problem?

ps.如果您有更好的 json 数据布局想法，欢迎您提出建议，我是 json(和 angularjs)的新手.

ps. if you have an idea for better layout for this data in json, your suggestions are welcome, I'm new to json (and angularjs).

推荐答案

您正在寻找的解决方案在 Angular 的官方教程中.在本教程中，电话从 JSON 文件使用 Angulars $http 服务 加载.在下面的代码中，我们使用 $http.get 加载保存在手机目录中的 phone.json 文件:

The solution you are looking for is in Angular's official tutorial. In this tutorial Phones are loaded from a JSON file using Angulars $http service . In the code below we use $http.get to load a phones.json file saved in the phones directory:

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';
});

然后我们遍历手机:

<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>

这篇关于使用 angularjs 和 ng-repeat 从 JSON 数据创建表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！