2016-04-13 26 views
1

API'den alınan verileri göstermek için tablo oluşturmaya çalışıyorum. Veriler JSON biçimindedir ve AngularJS kullanılarak tabloda gösterilmesi gerekir. Gerekli verileri görünümde geri yükleyebildiğim ancak tabloları doğru şekilde biçimlendiremiyorum. Ben sadece döngüler ngRepeat ikisini kullanmaya ihtiyacım varJSgular verilerini angularjs kullanarak tablodaki formatı nasıl?

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

cevap

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> 

Eğik https://plnkr.co/edit/GZtWlx5aDWvsseSs9ugW?p=preview

Görünüm: Şifre burada plunker içindedir

<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

İlgili konular