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

标签 javascript angularjs multidimensional-array

我正在尝试创建表格来显示从 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/

相关文章:

php - 如何在 PHP 中构建多维数组

PHP:用整个数据库数据创建一个数组

c - 在 C 中,如何从多维数组中打印字符串?

javascript - 受约束的随机数总是用 javascript/jquery 总计约束

javascript - jQuery 中的 CSS 边距减去等于

javascript - 使用 PEG.js 的简单解析问题

javascript - 如何在用户滚动时更改颜色

javascript - Angularjs limitTo 在使用(键,值)时不起作用

linux - 安装/运行 meteor-angular 时出现问题

jquery - ng-mouseover 不起作用