使用angularjs和ng-repeat从JSON数据创建表 [英] Create Table from JSON Data with angularjs and ng-repeat
问题描述
{
Workout1：{
Name：First，
Rounds：[
{
Exercises：[
{
Name：Exercise1，
重复：10
}，
{
名称：练习2，
重复：10
}，
{
Name：Exercise3，
Repeat：10
}
]
}，
{
练习：[
{
Name：Exercise1，
Repeat：20
}，
{
Name：Exercise2，
重复：20
}，
{
名称：练习3，
重复：20
}
]
}，
{
Exercises：[
{
Name：Exercise1，
重复：30
}，
{
姓名：练习2，
重复：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练习1< / td>
< td> 20练习1< / td>
< td> 30练习1< / td>
< / tr>
< tr>
< td> 10练习2< / td>
< td> 20练习2< / td>
< td> 30练习2< / td>
< / tr>
< tr>
< td> 10练习3< / td>
< td> 20练习3< / td>
< td> 30练习3< / td>
< / tr>
< / table>
用于表格预览：
http://jsfiddle.net/54pD8/
我的问题是，html表格工作在行的基础上。
我可以用ng-repeat循环遍历我的回合，然后遍历我的excercises
，但是为了创建表格，我总是需要每个练习的第一个，然后是每个练习的第二个，等等。
有人可以帮我解决这个问题吗？
ps。如果您对json中的这些数据有更好的布局的想法，欢迎您提出建议，我是json（和angularjs）的新手。 您正在寻找的解决方案是在Angular官方教程中。在本教程中，电话是使用Angulars $ http服务从 JSON文件加载的。在下面的代码中，我们使用 $ 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';
}）;
然后我们迭代手机：
<表>
< tbody ng-repeat =我在手机中>
< 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>
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
}
]
}
]
}
}
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>
for table preview: http://jsfiddle.net/54pD8/
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. if you have an idea for better layout for this data in json, your suggestions are welcome, I'm new to json (and angularjs).
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';
});
We then iterate over the phones:
<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屋！
