gpt4 book ai didi

javascript - 如何使用 angularjs 正确格式化表中的 JSON 数据?

转载 作者:行者123 更新时间:2023-11-27 23:05:47 25 4
gpt4 key购买 nike

我正在尝试创建表格来显示从 API 收到的数据。数据为 JSON 格式,需要使用 AngularJS 在表格上显示。我能够检索 View 中所需的数据,但无法在表中正确设置其格式。代码位于 plunker 中:https://plnkr.co/edit/GZtWlx5aDWvsseSs9ugW?p=preview

查看

<body ng-app="ShopOpeningHrs">
<div class="container" ng-controller="ScheduleCtrl">
<table>
<thead>
<tr>
<th>Sunday</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="schedule in singledayschedule">
<td>{{ schedule.morning }}</td>
<td>{{ schedule.evening }}</td>
</tr>
</tbody>
</table>
</div>

Angular

var app = angular.module("ShopOpeningHrs", []);
app.controller("ScheduleCtrl", function($scope, $http) {
$http.get('data.json').
success(function(data, status, headers, config) {
$scope.schedule = data[0];
$scope.singledayschedule = [];

angular.forEach($scope.schedule, function(value, key) {
angular.forEach(value, function(value, key) {
$scope.singledayschedule.push(value);
});
});
console.log($scope.singledayschedule);
}).
error(function(data, status, headers, config) {
// log error
});
});

最佳答案

我认为你只需要使用两个 ngRepeat 循环:

  <tbody>
<tr ng-repeat="(shop, schedule) in singledayschedule">
<td>{{ shop }}</td>
<td ng-repeat="(day, times) in schedule">
<div>{{ times.morning }}</div>
<div>{{ times.evening }}</div>
</td>
</tr>
</tbody>

演示:https://plnkr.co/edit/CYSqQYFhENQfeeYRFTvp?p=preview

关于javascript - 如何使用 angularjs 正确格式化表中的 JSON 数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36595671/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com