Question

我试图使用免费的足球数据api制作一个简单的英超联赛表。当我控制log vm.table时，我得到了表格工作所需的所有数据。这是否意味着html文件中存在错误？我是一个有角度的新手，我试图通过制作这个小应用程序来学习它。有人能指出我的问题所在吗？控制台没有显示任何错误或任何错误，但它根本无法按预期将数据打印到表中。

这是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 个答案: