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

Question

我正在尝试使用免费的足球数据API制作一个简单的英超联赛表格。 当我控制台vm.table日志时，我获得了所有需要的数据以使表正常工作。 这是否意味着html文件中存在错误？ 我是angular的新手，我正在尝试通过制作这个小应用程序来学习它。 有人可以指出我的问题所在吗？ 控制台没有显示任何错误或任何内容，但是它只是没有按预期将数据打印到表中。

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

这是脚本文件：

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

你应该改变

从

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

至

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

Answer 2

它应该与此类似，因为您在应用程序中使用controllerAs语法。

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

编辑

编辑问题后，您应该使用@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