Question

我正在尝试从Json API获取数据并将其显示在用户事件上。每当我对它应用ng-repeat属性时，div就消失了？我试图浏览不同的教程和其他文档，但无法找到答案。请帮忙。感谢。

我的Html：

    <!DOCTYPE html>
<html ng-app="myApp">
<head>
    <link rel="icon" type="image/png" href="images/logo.png">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Football News</title>

    <link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet"> 


    <!--AngularJs CDN-->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>

    <link rel="stylesheet" type="text/css" href="Css/home.css">
</head>
<body>
    <div class="container" ng-controller="homeController as home" ng-init="home.loadAllMatches()">
        <div class="mainContent">
            <div class="header">
                <span>Primier League</span>
            </div>
            <div class="content">
                <div class="matchList" ng-repeat="round in home.rounds">
                    <div class="matchListContent" ng-repeat=" match in round.matches"> 
                        <span>{{ match.name }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="angular/Controller/mainController.js"></script>
</body>
</html>

我的Js：

 var footballApp = angular.module('myApp', []);

footballApp.controller('homeController',['$http', function($http){
    var self = this;
    this.matches = [];
    console.log(this.matches);

    this.baseUrl = "https://raw.githubusercontent.com/openfootball/football.json/master/2015-16/en.1.json";

    this.loadAllMatches = function(){

        $http({
            method: 'GET',
            url: self.baseUrl
        }).then(function successCallback(response){
            self.matches = response.data.rounds;
            console.log(self.matches);

        }, function errorCallback(response) {
            alert("Some error ocurred. Check Console");
            console.log(response);
        });
    }

}]);``

您可以通过此链接查看Json Api：EPL

Answer 1

在渲染数据时，您没有正确绑定值，在代码下面可能对你有用

控制器

var URL = 'https://raw.githubusercontent.com/openfootball/football.json/master/2015-16/en.1.json'
            $http.get(URL).then(function(response) {
                $scope.dataset= response.data;

            });

<强> HTML

<div ng-repeat="value in dataset.rounds">
        <div ng-repeat = "x in value.matches">{{x.team1.name}} , {{x.team2.name}}</div>
</div>

应用ng-repeat属性后Div消失

1 个答案: