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