从JSON数据与angularjs和NG-重复

创建表，我有以下数据作为JSON：从JSON数据与angularjs和NG-重复

{ 
    "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-重复一个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循环遍历我的回合，然后通过我的excercises ，但创建表格时，我总是需要每个练习的第一个，然后是每个练习的第二个，等等。

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

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

来源

2014-03-05 user1616332

更新下面的例子中使用的表，而不是李。请注意ng：repeat仍被使用。 –

您正在寻找的解决方案是在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>

来源

2014-03-05 21:09:52

我用相同的代码尝试过它，它与列表一起工作，但我需要一张桌子！ – user1616332

谢谢，这正是我需要的！ – user1616332

我不确定这是由于Angular的更新还是错误，但我相信ng：repeat应该是ng-repeat。当我使用ng：repeat时，出现错误，但它与ng-repeat一起使用。我正在使用包含外部谷歌脚本的方法：谢谢！ – Slopes

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

所以最好你可以去我的代码来创建动态表，按你的数据列和行会增加或减少..

来源

2015-04-25 04:24:04

钍在你的代码中是静态的。它应该是动态的，根据数据增加列 – santoshK

要使用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

来源

2015-10-02 04:34:44 Manish

简单的方法取出的参考以用于创建在正常表动态头部和单元：

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

来源

2016-02-21 06:05:41 santoshK

角2或4：

没有更多的ng-repeat，它现在是最新的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"}]

来源

2017-09-28 14:18:14 balazs630

从JSON数据与angularjs和NG-重复

回答

相关问题