2016-04-13 4 views
1

Я пытаюсь создать таблицу для отображения данных, полученных от API. Данные находятся в формате JSON и должны отображаться в таблице с помощью AngularJS. Я могу получить требуемые данные в представлении, но я не могу правильно форматировать их в таблицах. Код находится в plunker здесь: https://plnkr.co/edit/GZtWlx5aDWvsseSs9ugW?p=previewКак правильно форматировать данные JSON в таблице с помощью angularjs?

Посмотреть

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

Угловая

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

ответ

1

Я думаю, вам просто нужно использовать два 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> 

De mo: https://plnkr.co/edit/CYSqQYFhENQfeeYRFTvp?p=preview

Смежные вопросы