用于显示API数据的Angular帮助

Question

给出以下JSON文件： https://drive.google.com/file/d/0Byt0rakzaB6bNXM0RW1ua3owY1U/view?usp=sharing https://drive.google.com/file/d/0Byt0rakzaB6bdEhCSmFnZDBuZlU/view?usp=sharing

创建响应式网页以显示上面提供的数据。 要求： 该页面对所有移动设备都有响应 利用Angular JS 1.X作为结构框架

这就是问题所在。我有像下面的编码，使它们像截图表。数据显示在控制台中。我可以像所需的屏幕截图一样在表格中显示数据 .................................................. ...

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("NHL_Goaltenders.json")
    .then(function(response) {
       $scope.myData1 = response;
       console.log(response);
      $http.get("NHL_Skaters.json").then(function(response){
         $scope.myData2 = response;
        console.log(response);
      });
    });
});
</script> 


<div ng-app="myApp" ng-controller="myCtrl"> 
  <!-- <div ng-repeat="x in myData1">
    <p>{{ x.firstname}}</p> -->
<table border="1">

   <tr>

     <td>NAME</td>&nbsp;
     <td>TEAM</td>&nbsp;
     <td>GP</td>&nbsp;
     <td>G</td>&nbsp;
     <td>A</td>&nbsp;
     <td>PTS</td>&nbsp;
  </tr>

  <tr ng-repeat="x in myData1">

     <td>{{ x.Headers[0]}}</td>&nbsp;
     <td>{{ x.Headers[1]}}</td>&nbsp;
     <td>{{ x.Headers[2]}}</td>&nbsp;
     <td>{{ x.Headers[3]}}</td>&nbsp;
     <td>{{ x.Headers[4]}}</td>&nbsp;
     <td>{{ x.Headers[5]}}</td>&nbsp;
  </tr>
    <tr ng-repeat="x in myData1">

     <td>{{ x.Statistics[0][0]}}</td>&nbsp;
     <td>{{ x.Statistics[0]}}</td>&nbsp;
     <td>{{ x.Statistics[2]}}</td>&nbsp;
     <td>{{ x.Statistics[3]}}</td>&nbsp;
     <td>{{ x.Statistics[4]}}</td>&nbsp;
     <td>{{ x.Statistics[5]}}</td>&nbsp;
  </tr>
</table>

</div>

Answer 1

以下是可能的解决方案之一：https://plnkr.co/edit/VahUhdPGF0BQAai9Lwl8?p=preview

  <table border="1">
     <tr>
       <th ng-repeat="header in goaltenders.Headers">{{header}}</th>
    </tr>

    <tr ng-repeat="row in goaltenders.Statistics track by $index">
       <td ng-repeat="item in row track by $index">{{ item }}</td>
    </tr>
  </table>