Question

我有以下数据作为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表。所以我得到下表：

<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表是基于行的。我可以通过我的Rounds然后通过我的练习来重复ng-repeat 但是为了创建一个表格，我需要每个练习的第一个，然后是每个练习的第二个，等等。

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

PS。如果您对json中的这些数据有更好的布局，我们欢迎您的建议，我是json（和angularjs）的新手。

Answer 1

您正在寻找的解决方案是Angular的官方教程。在本教程中，电话是从JSON文件using Angulars $http service 加载的。在下面的代码中，我们使用 $ http.get 来加载保存在phones目录中的phones.json文件：

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>

Answer 2

在普通表中使用简单的方法创建动态标题和单元格：

<table width="100%" class="table">
 <thead>
  <tr>
   <th ng-repeat="(header, value) in MyRecCollection[0]">{{header}}</th>
  </tr>
 </thead>
 <tbody>
  <tr ng-repeat="row in MyRecCollection | filter:searchText">
   <td ng-repeat="cell in row">{{cell}}</td>
  </tr>
 </tbody>
</table>

MyApp.controller('dataShow', function ($scope, $http) {
    //$scope.gridheader = ['Name','City','Country']
        $http.get('http://www.w3schools.com/website/Customers_MYSQL.php').success(function (data) {

                $scope.MyRecCollection = data;
        })

        });

JSON数据：

[{
    "Name": "Alfreds Futterkiste",
    "City": "Berlin",
    "Country": "Germany"
}, {
    "Name": "Berglunds snabbköp",
    "City": "Luleå",
    "Country": "Sweden"
}, {
    "Name": "Centro comercial Moctezuma",
    "City": "México D.F.",
    "Country": "Mexico"
}, {
    "Name": "Ernst Handel",
    "City": "Graz",
    "Country": "Austria"
}, {
    "Name": "FISSA Fabrica Inter. Salchichas S.A.",
    "City": "Madrid",
    "Country": "Spain"
}, {
    "Name": "Galería del gastrónomo",
    "City": "Barcelona",
    "Country": "Spain"
}, {
    "Name": "Island Trading",
    "City": "Cowes",
    "Country": "UK"
}, {
    "Name": "Königlich Essen",
    "City": "Brandenburg",
    "Country": "Germany"
}, {
    "Name": "Laughing Bacchus Wine Cellars",
    "City": "Vancouver",
    "Country": "Canada"
}, {
    "Name": "Magazzini Alimentari Riuniti",
    "City": "Bergamo",
    "Country": "Italy"
}, {
    "Name": "North/South",
    "City": "London",
    "Country": "UK"
}, {
    "Name": "Paris spécialités",
    "City": "Paris",
    "Country": "France"
}, {
    "Name": "Rattlesnake Canyon Grocery",
    "City": "Albuquerque",
    "Country": "USA"
}, {
    "Name": "Simons bistro",
    "City": "København",
    "Country": "Denmark"
}, {
    "Name": "The Big Cheese",
    "City": "Portland",
    "Country": "USA"
}, {
    "Name": "Vaffeljernet",
    "City": "Århus",
    "Country": "Denmark"
}, {
    "Name": "Wolski Zajazd",
    "City": "Warszawa",
    "Country": "Poland"
}]

Answer 3

要使用JSON创建HTML表格，我们将使用AngularJS的ngRepeat指令。

示例

<强> HTML

<!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script> </head> <body> <div ng-app="myApp" ng-controller="customersCtrl"> <table border="1"> <tr ng-repeat="x in names"> <td>{{x.Name}}</td> <td>{{x.City}}</td> <td>{{x.Country}}</td></tr> </table> </div> </body> </html>

<强>的JavaScript

var app = angular.module('myApp', []); app.controller('customersCtrl', function($scope) { $scope.names = [ { "Name" : "Max Joe", "City" : "Lulea", "Country" : "Sweden" }, { "Name" : "Manish", "City" : "Delhi", "Country" : "India" }, { "Name" : "Koniglich", "City" : "Barcelona", "Country" : "Spain" }, { "Name" : "Wolski", "City" : "Arhus", "Country" : "Denmark" } ]; });

在上面的例子中，我从json创建了表。我已经参考了 http://www.tutsway.com/create-html-table-using-json-in-angular-js.php

Answer 4

以表格格式呈现任何json：

<table>
    <thead>
      <tr>
        <th ng-repeat="(key, value) in vm.records[0]">{{key}}</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="(key, value) in vm.records">
        <td ng-repeat="(key, value) in value">
          {{value}}
        </td>
      </tr>
    </tbody>
</table>

See complete code in detail with other features

Answer 5

您可以使用$http.get()方法获取JSON文件。然后将响应数据分配给$scope对象。在HTML创建表使用ng-repeat for $ scope对象。 ng-repeat将循环遍历此循环的行，您可以动态地将数据绑定到列。

我检查了你的代码，你已经创建了静态表

<table>
<tr>
<th>Name</th>
<th>Relationship</th>
</tr>
<tr ng-repeat="indivisual in members">
<td>{{ indivisual.Name }}</td>
<td>{{ indivisual.Relation }}</td>
</tr>
</table>

这样你可以更好地根据我的代码创建动态表格，你的列和行会增加或减少..

使用angularjs和ng-repeat从JSON数据创建表

5 个答案: