个人中心
gpt4 book ai didi

javascript - AngularJs ng-repeat 尚未渲染数据 http 200 响应

转载 作者：行者123 更新时间：2023-12-03 00:33:10 24 4
gpt4 key购买 nike

这是一项学术作业。这是我第一次使用 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 。它们需要在单独的函数上调用，以便在屏幕加载时它们都不会运行。一旦我将数据重新组织成单独的函数，就会显示数据。

感谢大家的帮助

关于javascript - AngularJs ng-repeat 尚未渲染数据 http 200 响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53770720/

24 4 0
文章推荐： javascript - JS 脚本不适用于使用 jQuery 的 .load() 加载的 div
文章推荐： azure - Azure 管理证书的用途
文章推荐： azure - 更新 Azure 上的云服务时出现 SqlException
文章推荐： javascript - Fabric getPointer 方法在 Firefox 中不起作用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com