[英]AngularJs ng-repeat not rendering data yet http 200 response
這是一項學術任務。 這是我第一次使用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
}
]
經過大量的敲打之后，結果出現在我的groups.js中，我在同一函數中調用了我的所有方法，例如http.get。 需要在單獨的函數上調用它們，以便它們在屏幕加載時都不會運行。 一旦我重新組織成單獨的功能，數據就會顯示出來。
謝謝大家的幫助
您是否已使用響應對象完成console.log以確保它符合您的期望？
在這里做：
.then(function (response) {
console.log(response);
$scope.leagueGroup = response.data;
$scope.$apply();
});
分配數據后是否嘗試過執行$ scope。$ apply（）？
確認數據正確的另一種方法是，只需在模板中放置一個<pre>標記以確認數據已綁定，例如： <pre>{{leagueGroup}}</pre>
您的模塊名稱似乎有誤。 您已將其命名為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>
使用ng-repeat從angularjs中的http響應數組中檢索數據
[英]using ng-repeat to retrive data from an http response array in angularjs
控制器數據中的checkbox ng-Repeat不渲染：AngularJs
[英]checkBox ng-Repeat from controller-data not Rendering : AngularJs
AngularJS ng-repeat-http.gs檢索數據，但不顯示
[英]AngularJS ng-repeat - http.gs retrieving data, but not displaying
AngularJS，ng-repeat with ng-include not rendering
[英]AngularJS, ng-repeat with ng-include not rendering
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.