[英]Display Data from Json Array Using AngularJS
我正在尝试使用以下代码在表中显示JSON数组中的数据。 但是所有数据都显示在一行中。 它应显示为每行中的每个记录,灰色代表偶数,白色代表奇数。 但是我犯了一些错误,我无法识别它。
CSS样式:
table,td {
border: none;
border-collapse: collapse;
padding: 5px;
width:1047px;
height: 64px;
left:16px;
position:relative;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
My View (It is a partial view which is displayed from index.html):
<h1 id="title">Shuttle Schedule</h1>
<table width="100%" cellpadding="4" cellspacing="25" style="margin-top:-118px">
<thead align="center">
<th ng-repeat="row in module.csvInput">{{row.label}}</th>
<th ng-repeat="row in module.csvInput">{{row.label}}</th>
</thead>
<tr align="center" >
<td ng-repeat="row in module.csvInput" >
<div ng-repeat="(id, time) in row.times" ng-if="id <= 8">
{{time}}
</div>
</td>
<td ng-repeat="row in module.csvInput">
<div ng-repeat="(id, time) in row.times" ng-if="id > 8">
{{time}}
</div>
</td>
</tr>
</table>
<h3 class="noservice">No Service 1:20pm to 2:00pm<br> Driver can make additional runs beyond this schedule if needed.<br>
D1 is 8910 Ridgeline Blvd. D4 is 8744 Lucent Blvd.</h3>
</div>
我的JSON代码段:
{
"modules": [
{
"title": "Shuttle Schedule",
"feature": "shuttle",
"order": 4,
"csvInput": [
{
"label": "D1 PickUp",
"times": [
"8:00 AM",
"8:30 AM",
"9:00 AM",
"9:30 AM",
"10:00 AM",
"10:30 AM",
"11:00 AM",
"11:30 AM",
"12:00 PM",
"12:30 PM",
"1:30 PM"
]
},
{
"label": "D4 PickUp",
"times": [
"7:50 AM",
"8:20 AM",
"8:50 AM",
"9:20 AM",
"9:50 AM",
"10:20 AM",
"10:50 AM",
"11:20 AM",
"11:50 AM",
"12:20 PM",
"12:50 PM",
"1:10 PM"
]
}
],
"filter": null,
"icon": "media/shuttle.svg"
}
],
"settings": {
"buildings": 2,
"floor": 4,
"timeout": "120 (in seconds)",
"cssOverride": "custom.css",
"kiosk_coords": "200,200"
}
}
您应该先将ng-repeat放在tr标签上,而不要放在td标签上。 所以应该是这样的:
<table> <tr ng-repeat="entity in list"><td>{{entity.lable}}</td>
<td ng-repeat="time in entity.times">{{time}}</td></tr></table>
编辑:如果您希望您的数据以类似html的形式显示:entity.label:entity.timeEntity.label:entity.time ...
然后,您可能应该这样做:
<table> <div ng-repeat="entity in list"><tr ng-repeat="time in entity.times><td ng-class-odd="'grey'" ng-class-even="'white'">{{entity.lable}}</td>
<td ng-class-odd="'grey'" ng-class-even="'white'">{{time}}</td></tr></div></table>
您需要展开数据以匹配您希望它们显示的方式
$scope.module = data.modules[0];
var csvInput = $scope.module.csvInput;
$scope.headers = csvInput.map(x => x.label );
var rows = csvInput.map(x => x.times.slice(0, 8)).concat(csvInput.map(x => x.times.slice(8)));
var n = Math.max.apply(null, rows.map(x => x.length));
$scope.rows = [];
for ( i = 0; i < n; i++ ) {
$scope.rows[i] = rows.map(x => x[i]);
}
并显示该数据
<table width="100%" cellpadding="4" cellspacing="25" style="margin-top:-118px">
<thead align="center">
<th ng-repeat="row in headers">{{row}}</th>
<th ng-repeat="row in headers">{{row}}</th>
</thead>
<tbody>
<tr ng-repeat="row in rows">
<td ng-repeat="col in row track by $index">{{col}}</td>
</tr>
</tbody>
</table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.