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

Posted 2023-03-05

【中文标题】使用 angularjs 和 ng-repeat 从 JSON 数据创建表

【英文标题】：Create Table from JSON Data with angularjs and ng-repeat

【发布时间】：2014-04-08 04:21:45

【问题描述】：

我有以下 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 表是基于行的。 我可以用 ng-repeat 遍历我的回合，然后通过我的练习 但是为了创建一个表格，我总是需要每个练习的第一个，然后是每个练习的第二个，依此类推。

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

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

【问题讨论】：

将下面的示例更新为使用 table 而不是 li。请注意 ng:repeat 仍在使用。

【参考方案1】：

您正在寻找的解决方案在 Angular 的官方教程中。在本教程中，电话从 JSON 文件 using Angulars $http service 加载。在下面的代码中，我们使用 $http.get 来加载保存在电话目录中的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>

【讨论】：

我已经用相同的代码试过了，它适用于一个列表，但我需要一个表！

谢谢，这正是我所需要的！

我不确定这是由于 Angular 的更新还是错字，但我相信 ng:repeat 应该是 ng-repeat。使用 ng:repeat 时出现错误，但它适用于 ng-repeat。我正在使用包含外部 google 脚本的方法：

【参考方案2】：

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

<table  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"
]

【参考方案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

【参考方案4】：

Angular 2 或 4：

没有更多的 ng-repeat，它是 *ngFor now 在最近的 Angular 版本中！

<table style="padding: 20px; width: 60%;">
    <tr>
      <th  align="left">id</th>
      <th  align="left">status</th>
      <th  align="left">name</th>
    </tr>
    <tr *ngFor="let item of myJSONArray">
      <td>item.id</td>
      <td>item.status</td>
      <td>item.name</td>
    </tr>
</table>

使用了这个简单的 JSON：

["id":1,"status":"active","name":"A",
"id":2,"status":"live","name":"B",
"id":3,"status":"active","name":"C",
"id":6,"status":"deleted","name":"D",
"id":4,"status":"live","name":"E",
"id":5,"status":"active","name":"F"]

【参考方案5】：

以表格格式呈现任何 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

【参考方案6】：

您可以使用$http.get() 方法来获取您的JSON 文件。然后将响应数据分配给$scope 对象。在HTML 中创建表使用 ng-repeat 作为 $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>

所以更好的是你可以去我的代码创建动态表根据你的列和行将增加或减少的数据..

【讨论】：

在你的代码中是静态的。它应该是动态的，随着数据增加列