使用 JSON 中的 ng-repeat 创建 table

Question

我刚刚开始在我的项目中使用 Angular。手头的任务是我需要从 JSON 生成一个 table。我能够通过对所有内容进行硬编码来做到这一点，但是项目发生了变化，现在我需要使用 JSON。我想使用 ng-repeat。我的数据结构是一个对象数组，其中包含表示业务和时间的嵌套对象。我的行为很奇怪，我想知道是不是我的数据结构导致的。

我创建了一个 fiddle。任何建议将不胜感激。

我的数据结构如下所示：

var dept = {
sales : { startTime : "", endTime : "" },
service : { startTime : "", endTime : "" },
accounting : { startTime : "", endTime : "" },
parts : { startTime : "", endTime : "" },
bodyShop : { startTime : "", endTime : "" },
other : { startTime : "", endTime : "" },

}; 这些对象嵌套在一个数组中，每个索引代表一周中的一天。例如，索引 1 将是星期一。

   <tr ng-repeat="hours in businessHours">
    <td>Monday</td>
    <td>{{hours[0].startTime}}</td>
    <td>{{hours[0].endTime}}</td>
    <td>{{hours[0].startTime}}</td>
    <td>{{hours[0].endTime}}</td>
    <td>{{hours[0].startTime}}</td>
    <td>{{hours[0].endTime}}</td>    
</tr>

我创建了一个fiddle来给一个更好的图片

`http://jsfiddle.net/yu216x5w/4/`

Answer 1

您可以尝试这样的操作：

var hours = [
        {
        "name" : "Monday",
      "hours": {
        "sales" : { startTime : "5", endTime : "6" },
        "service" : { startTime : "2", endTime : "3" },
        "accounting" : { startTime : "4", endTime : "6" },
        "parts" : { startTime : "10", endTime : "11" },
        "bodyShop" : { startTime : "3", endTime : "8" },
        "other" : { startTime : "a", endTime : "b" }
        }
    },
    {
        "name" : "Tuesday",
      "hours": {
        "sales" : { startTime : "5", endTime : "6" },
        "service" : { startTime : "2", endTime : "3" },
        "accounting" : { startTime : "4", endTime : "6" },
        "parts" : { startTime : "10", endTime : "11"},
        "bodyShop" : { startTime : "3", endTime : "8" },
        "other" : { startTime : "a", endTime : "b" }
        }
    }
];


var mockDataForThisTest = "json=" + encodeURI(JSON.stringify(hours));


var app = angular.module('myApp', []);

function businessHours($scope, $http) {

    $scope.schedule = [];

    $scope.loadHours = function() {
        var httpRequest = $http({
            method: 'POST',
            url: '/echo/json/',
            data: mockDataForThisTest

        }).success(function(data, status) {
        console.log(data);
            $scope.schedule = data;
        });

    };

}

与：

    <div ng-app="myApp">
<div ng-controller="businessHours">
    <p>    Click <a ng-click="loadHours()">here</a> to load data.</p>
<table>
    <tr>
      <th></th>
    <th style="vertical-align:top" scope="col" colspan="2">Sales</th>
   <th style="vertical-align:top" scope="col" colspan="2" >Service</th>
  <th style="vertical-align:top" scope="col" colspan="2">Parts</th>
   <th style="vertical-align:top" scope="col" colspan="2">Accounting</th>
    <th style="vertical-align:top" scope="col" colspan="2">Body Shop</th>
    <th style="vertical-align:top" scope="col" colspan="2" >Other</th>
    </tr>
    <tr ng-repeat="day in schedule">
        <td>{{day.name}}</td>
        <td>{{day.hours.sales.startTime}} - {{day.hours.sales.endTime}}</td>
        <td>{{day.hours.service.startTime}} - {{day.hours.service.endTime}}</td>
        <td>{{day.hours.accounting.startTime}} - {{day.hours.accounting.endTime}}</td>
        <td>{{day.hours.parts.startTime}} - {{day.hours.parts.endTime}}</td>
        <td>{{day.hours.bodyShop.startTime}} - {{day.hours.bodyShop.endTime}}</td>
        <td>{{day.hours.other.startTime}} - {{day.hours.other.endTime}}</td>    
    </tr>
</table>
</div>

http://jsfiddle.net/yu216x5w/7/

使用 JSON 中的 ng-repeat 创建 table

creating a table using ng-repeat from JSON

angularjs

ng-repeat