ng-Wiederholung der Datenbindung in Angular funktioniert nicht. Wo gehe ich falsch?

Ich versuche, eine einfache Premier League Tabelle mit einem kostenlosen Fußball Daten API zu machen. Wenn ich log vm.table trumple, bekomme ich alle Daten, die ich haben sollte, damit die Tabelle funktioniert. Bedeutet das einen Fehler in der HTML-Datei? Ich bin ein absoluter Neuling mit eckigen und ich versuche es zu lernen, indem ich diese kleine App mache. Kann mir jemand zeigen, wo mein Problem ist? Die Konsole zeigt keine Fehler oder irgendetwas an, aber die Daten werden nicht wie erwartet in die Tabelle gedruckt.ng-Wiederholung der Datenbindung in Angular funktioniert nicht. Wo gehe ich falsch?

Dies ist die HTML-Datei:

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

Dies ist die Skript-Datei:

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); 
}); 
});

Quelle

2016-09-12 David Nugent

Sie sollten, ändern

Von

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

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

Quelle

2016-09-12 06:53:01 Sajeetharan

Danke. Das hat funktioniert :) So einfach. –

aber Sie ändern besser die VM mit Ihrem Controller-Namen in der Bindung –

es sollte ähnlich sein, weil Sie controllerAs Syntax in Ihrer Anwendung verwenden.

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

bearbeiten

nach der Frage der Bearbeitung sollten Sie @Sajeetharan Antwort verwenden.

Quelle

2016-09-12 06:51:37

Dank für die Beantwortung. Ich habe tatsächlich @ Sajeetharans Antwort benutzt. Schätze die Antwort trotzdem. :) –

ng-Wiederholung der Datenbindung in Angular funktioniert nicht. Wo gehe ich falsch?

Antwort

Verwandte Themen