Angular中的ng-repeat数据绑定不起作用。我要去哪里错了？

Question

I'm trying to make a simple Premier League table using a free football data api. 我正在尝试使用免费的足球数据API制作一个简单的英超联赛表格。 When I console log vm.table, I get all the data I should have for the table to work. 当我控制台vm.table日志时，我获得了所有需要的数据以使表正常工作。 Does that mean there is a fault in the html file? 这是否意味着html文件中存在错误？ I'm a total novice with angular and I'm trying to learn it by making this little app. 我是angular的新手，我正在尝试通过制作这个小应用程序来学习它。 Can someone point me to where my problem is? 有人可以指出我的问题所在吗？ The console shows no errors or anything, but it simply doesn't print the data into the table as expected. 控制台没有显示任何错误或任何内容，但是它只是没有按预期将数据打印到表中。

this is the html file: 这是html文件：

<html ng-app="eplApp" lang="en">
<head>

<meta charset="UTF-8">
<title>EPL Feeder</title>
<!-- styles -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="style.css">

<!-- scripts -->
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="script.js"></script>

</head>
<!-- define angular controller -->
<body ng-controller='tableCtrl as table'>
  <table>
    <thead>
      <tr><th colspan="4">English Premier League Table</th></tr>
  <tr>
        <td>Pos</td>
        <td>Team</td>
        <td>Played</td>
        <td>Win</td>
        <td>Draw</td>
        <td>Loss</td>
        <td>GF</td>
        <td>GA</td>
        <td>GD</td>
        <td>Points</td>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat='team in vm.table' ng-class="{top:team.position === 1, cl: (team.position > 1) && (team.position < 5), el:team.position === 5, rel: (team.position > 17)}">
        <td>{{team.position}}</td>
        <td class="flexbox" ng-click="teamView()">
        <img ng-src="{{team.crestURI}}" alt="{{team.teamName}} crest" />
        <p class="teamName">{{team.teamName}}</p>
        </td>
        <td><p>{{team.playedGames}}</p></td>
        <td>{{team.wins}}</td>
        <td>{{team.draws}}</td>
        <td>{{team.losses}}</td>
        <td>{{team.goals}}</td>
        <td>{{team.goalsAgainst}}</td>
        <td>{{team.goalDifference}}</td>
        <td>{{team.points}}</td>
      </tr>
    </tbody>
  </table>

This is the script file: 这是脚本文件：

var app = angular.module('eplApp', []);

app.controller('tableCtrl', function($http) {
  var vm = this;
  vm.table = [];
    $http({
      headers: { 'X-Auth-Token': '971acba677654cdb919a7ccebd5621e2' },
      method: "GET",
      url: "http://api.football-data.org/v1/soccerseasons/426/leagueTable"
}).then(function(response) {
  vm.table = response.data.standing;
  console.log(vm.table);
});
});

Answer 1

You should change, 你应该改变

From 从

<body ng-controller='tableCtrl as table'>

To 至

<body ng-controller='tableCtrl as vm'>

Answer 2

it should be similar to this because you use controllerAs syntax in your app. 它应该与此类似，因为您在应用程序中使用controllerAs语法。

 <tr ng-repeat='team in table.standing' ...

Edit 编辑

after editing your question you should use @Sajeetharan answer. 编辑问题后，您应该使用@Sajeetharan答案。

Angular中的ng-repeat数据绑定不起作用。我要去哪里错了？

问题描述

2 个解决方案

解决方案1
4 已采纳 2016-09-12 06:53:01

解决方案2
1 2016-09-12 06:51:37

Angular中的ng-repeat数据绑定不起作用。 我要去哪里错了？

问题描述

2 个解决方案

解决方案1 4 已采纳 2016-09-12 06:53:01

解决方案2 1 2016-09-12 06:51:37

Angular中的ng-repeat数据绑定不起作用。我要去哪里错了？

解决方案1
4 已采纳 2016-09-12 06:53:01

解决方案2
1 2016-09-12 06:51:37