这是一项学术任务。这是我第一次使用Angularjs，我正在尝试将数据显示到网页上。在Chrome控制台上，我收到的HTTP响应代码为200，这表示我已成功获取数据，但似乎没有显示。
groups.html：
<html>
<head>
<script src = "groups.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="groupsCtrl">
<div class="group-jumbotron">
<h1 class="display-4">Champion's League Groups</h1>
<p class="lead">The 2018–19 UEFA Champions League group stage began on 18 September and is scheduled to end on 12 December 2018. <br/>
A total of 32 teams compete in the group stage to decide the 16 places in the knockout phase of the 2018–19 UEFA Champions League.</p>
<hr class="my-1">
<p>Information about each group can be seen below</p>
</div>
<div class="addGroup-Title">
<h4 class="display-6">Groups:</h4>
<table>
<thead>
<tr>
<th>Group Letter</th>
<th>Number of Teams</th>
<th>Matches Played</th>
<th>Top Goalscorer</th>
<th>Top Assists</th>
<th>Most Cards</th>
<th>Total Points</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="group in leagueGroup">
<td>{{group.groupLetter}}</td>
<td>{{group.numberOfTeams}}</td>
<td>{{group.totalMatchesPlayed}}</td>
<td>{{group.topGoalscorer}}</td>
<td>{{group.topAssists}}</td>
<td>{{group.mostCards}}</td>
<td>{{group.totalPoints}}</td>
</tr>
</tbody>
</table>
</div>
<div class="addGroup-Title">
<h4 class="display-6">Add a New Group:</h4>
<form ng-show="showForm" ng-submit="submitNewGroupForm()" style="margin-left: 10px;margin-right: 10px" ng-model="newGroup">
<div class="form-row">
<div class="form-group col-md-3">
<label for="AddGroupLetter">Group Letter:</label>
<input type="text" ng-model="newGroup.groupLetter"class="form-control" id="AddGroupLetter" min="1" max="2" required>
</div>
<div class="form-group col-md-3">
<label for="AddnumTeams">Number of Teams:</label>
<input type="number" class="form-control" id="AddnumTeams" ng-model="newGroup.numberOfTeams" required>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="AddTotalMatches">Total Matches Played:</label>
<input type="number" class="form-control" id="AddTotalMatches" ng-model="newGroup.totalMatchesPlayed" required>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="AddTotalPoints">Total Points:</label>
<input type="number" class="form-control" id="AddTotalPoints" ng-model="newGroup.totalPoints" required>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-3">
<label for="AddTopGoalscorer">Top Goalscorer:</label>
<input type="text" class="form-control" id="AddTopGoalscorer" ng-model="newGroup.topGoalscorer" required>
</div>
<div class="form-group col-md-3">
<label for="AddTopAssists">Top Assists:</label>
<input type="text" class="form-control" id="AddTopAssists" ng-model="newGroup.topAssists" required>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="AddMostCards">Most Cards</label>
<input type="text" class="form-control" id="AddMostCards" ng-model="newGroup.mostCards" required>
</div>
</div>
<button type="submit" class="btn btn-primary btn-lg">Create A Group</button>
</form>
</div>
<div class="addGroup-Title">
<h4 class="display-6">Delete a Group:</h4>
<div class="form-row">
<div class="form-group col-md-6">
<label for="DeleteGroup">ID of Group</label>
<input type="text" class="form-control" id="DeleteGroup" ng-model="groupData.groupId" required>
</div>
</div>
<button type="submit" class="btn btn-primary btn-lg">Delete A Group</button>
</div>
</div>
</div>
</body>
</html>
groups.js：
'use strict';
angular.module('myApp.groups', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/groups', {
templateUrl: 'groups/groups.html',
controller: 'groupsCtrl'
});
}])
.controller('groupsCtrl', function ($scope, $http) {
$scope.leagueGroup = [];
$http.get('http://localhost:5000/api/v1/groups')
.then(function (response) {
$scope.leagueGroup = response.data;
});
$scope.submitNewGroupForm = function () {
$scope.newGroup =
{
groupId: getgroupId(),
groupLetter: $scope.newGroup.groupLetter,
numberOfTeams: $scope.newGroup.numberOfTeams,
totalMatchesPlayed: $scope.newGroup.totalMatchesPlayed,
topGoalscorer: $scope.newGroup.topGoalscorer,
topAssists: $scope.newGroup.topAssists,
mostCards: $scope.newGroup.mostCards,
totalPoints: $scope.newGroup.totalPoints
};
$http.post('http://localhost:5000/api/v1/groups', $scope.newGroup)
.then(function (response) {
$scope.response = response.data;
alert('Created new Group: ' + $scope.response.stadiumName);
});
};
$http.delete('http://localhost:5000/api/v1/groups/'+ $scope.groupData.groupId)
.then(function (response) {
$scope.response = response.data;
});
});
function getgroupId() {
return Math.floor((Math.random() * 9999) + 10);
}
数据示例：
groupId: 1
groupLetter: "A"
mostCards: "Marcos Rojo"
numberOfTeams: 4
topAssists: "Kevin De Bruyne"
topGoalscorer: "Cristiano Ronaldo"
totalMatchesPlayed: 6
totalPoints: 48
响应（chrome开发）：
[
{
"groupId":1,
"groupLetter":"A",
"mostCards":"Marcos Rojo",
"numberOfTeams":4,
"topAssists":"Kevin De Bruyne",
"topGoalscorer":"Cristiano Ronaldo",
"totalMatchesPlayed":6,
"totalPoints":48
},
{
"groupId":2,
"groupLetter":"B",
"mostCards":"Ander Herrera",
"numberOfTeams":4,
"topAssists":"Luka Modric",
"topGoalscorer":"Sergio Aguero",
"totalMatchesPlayed":6,
"totalPoints":36
},
{
"groupId":3,
"groupLetter":"C",
"mostCards":"Sergio Ramos",
"numberOfTeams":4,
"topAssists":"Xavi",
"topGoalscorer":"Lionel Messi",
"totalMatchesPlayed":6,
"totalPoints":50
},
{
"groupId":4,
"groupLetter":"D",
"mostCards":"Virgil Van Dijk",
"numberOfTeams":4,
"topAssists":"Neymar",
"topGoalscorer":"Kylian MBappe",
"totalMatchesPlayed":6,
"totalPoints":32
}
]
答案 0 :(得分：1)
在我的groups.js中发生了很多事情之后，我在同一个函数中调用了我的所有方法，例如http.get。需要在单独的函数上调用它们，以便它们在屏幕加载时都不会运行。一旦我重新组织成单独的功能，就会显示数据。
感谢大家的帮助
答案 1 :(得分：0)
您是否对响应对象做了console.log，以确保它符合您的期望？
在这里做
.then(function (response) {
console.log(response);
$scope.leagueGroup = response.data;
$scope.$apply();
});
分配数据后，您是否尝试过执行$ scope。$ apply（）？
另一种确认您的数据正确无误的方法是，只需在模板中放置一个<pre>标记以确认数据已绑定，如下所示：
<pre>{{leagueGroup}}</pre>
答案 2 :(得分：0)
您的模块名称似乎错误。您已将其命名为myApp.groups，但它应该只是myApp。
angular.module('myApp.groups', ['ngRoute'])
应该是：
angular.module('myApp', ['ngRoute'])
您在控制台中遇到任何错误吗？
const data = [{
"groupId": 1,
"groupLetter": "A",
"mostCards": "Marcos Rojo",
"numberOfTeams": 4,
"topAssists": "Kevin De Bruyne",
"topGoalscorer": "Cristiano Ronaldo",
"totalMatchesPlayed": 6,
"totalPoints": 48
},
{
"groupId": 2,
"groupLetter": "B",
"mostCards": "Ander Herrera",
"numberOfTeams": 4,
"topAssists": "Luka Modric",
"topGoalscorer": "Sergio Aguero",
"totalMatchesPlayed": 6,
"totalPoints": 36
},
{
"groupId": 3,
"groupLetter": "C",
"mostCards": "Sergio Ramos",
"numberOfTeams": 4,
"topAssists": "Xavi",
"topGoalscorer": "Lionel Messi",
"totalMatchesPlayed": 6,
"totalPoints": 50
},
{
"groupId": 4,
"groupLetter": "D",
"mostCards": "Virgil Van Dijk",
"numberOfTeams": 4,
"topAssists": "Neymar",
"topGoalscorer": "Kylian MBappe",
"totalMatchesPlayed": 6,
"totalPoints": 32
}
];
const app = angular.module('myApp',[]);
app
.controller('groupsCtrl', ['$scope', '$http', '$timeout', function($scope, $http, $timeout) {
$timeout(1000)
.then(function() {
$scope.leagueGroup = data;
});
}])<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<html>
<body>
<div ng-app="myApp">
<div ng-controller="groupsCtrl">
<div class="addGroup-Title">
<h4 class="display-6">Groups:</h4>
<table>
<thead>
<tr>
<th>Group Letter</th>
<th>Number of Teams</th>
<th>Matches Played</th>
<th>Top Goalscorer</th>
<th>Top Assists</th>
<th>Most Cards</th>
<th>Total Points</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="group in leagueGroup">
<td>{{group.groupLetter}}</td>
<td>{{group.numberOfTeams}}</td>
<td>{{group.totalMatchesPlayed}}</td>
<td>{{group.topGoalscorer}}</td>
<td>{{group.topAssists}}</td>
<td>{{group.mostCards}}</td>
<td>{{group.totalPoints}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>