Erstellen einer Tabelle mit ng-Wiederholung von JSON

Question

Ich habe gerade begonnen, Angular für mein Projekt zu verwenden. Die Aufgabe besteht darin, eine Tabelle aus JSON zu generieren. Ich konnte dies tun, indem ich alles hart codierte, aber das Projekt änderte sich so, dass ich nun JSON verwenden musste. Ich würde gern ng-repeat verwenden. Meine Datenstruktur ist ein Array von Objekten mit verschachtelten Objekten, die das Geschäft und die Stunden darstellen. Ich bekomme seltsames Verhalten und frage mich, ob es meine Datenstruktur ist, die das verursacht.

Ich habe eine Geige erstellt. Jeder Rat würde sehr geschätzt werden.

Meine Datenstruktur sieht wie folgt aus:

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

}; Die Objekte sind in einem Array verschachtelt und jeder Index repräsentiert einen Wochentag. Zum Beispiel wäre Index 1 Montag.

<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> 

habe ich eine Geige ein besseres Bild

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

Answer 1

Sie können versuchen, etwas zu geben, wie folgt aus:

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; 
     }); 

    }; 

} 

mit:

<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/