如何使用angularjs在表格中正確格式化JSON數據？

我想創建表來顯示從API接收的數據。數據採用JSON格式，需要使用AngularJS在桌面上顯示。我可以在視圖中檢索所需的數據，但我無法在表格中正確格式化。該代碼是在plunker這裏：https://plnkr.co/edit/GZtWlx5aDWvsseSs9ugW?p=preview 如何使用angularjs在表格中正確格式化JSON數據？

查看

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

來源

2016-04-13 RajeebTheGreat

我想你只需要使用兩個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>

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

來源

2016-04-13 10:42:10 dfsq

如何使用angularjs在表格中正確格式化JSON數據？

回答

相關問題