2016-04-13 11 views
1

APIから受信したデータを表示するためにテーブルを作成しようとしています。データはJSON形式であり、AngularJSを使用してテーブルに表示する必要があります。私はビュー上で必要なデータを取得することができますが、テーブルで適切にフォーマットすることができません。私はあなただけのループngRepeat 2を使用する必要があると思うanglejsを使用してテーブル内のJSONデータを適切に書式設定するにはどうすればよいですか?

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

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

角度https://plnkr.co/edit/GZtWlx5aDWvsseSs9ugW?p=preview

ビュー:コードはここplunkerである

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

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

関連する問題