Question

下面是我正在尝试的代码。我该如何纠正错误？

<html ng-app="countryApp">
<head>
    <meta charset="utf-8">
    <title>Angular.js Example</title>
    <script src="angular.min.js"></script>
    <script>
        var countryApp = angular.module('countryApp', []);
        countryApp.controller('CountryCtrl', function($scope, $http){
            $http.get('countriesgdp.json').success(function(data) {
                    $ scope.countries = data;
            });
        });
    </script>
</head>
<body ng-controller="CountryCtrl">
    <table>
        <tr>
            <th>Country</th>
            <th>Population</th>
            <th>Flag</th>
            <th>Capital</th>
            <th><a href="https://en.wikipedia.org/wiki/List_of_countries_by_GDP_(PPP)">GDP (PPP)</a></th>
        </tr>
        <tr ng-repeat="country in countries">
            <td>{{country.name}}</td>
            <td>{{country.population}}</td>
            <td><img src="{{ country.flagURL }}" width="100"></td>
            <td>{{country.capital}}</td>
            <td>{{country.gdp | currency}}</td>
        </tr>
    </table>
</body>
</html>

Answer 1

控制台上是否有错误日志？首先，检查它，然后将数据记录到返回服务器的控制台中，或尝试在屏幕上显示所有数据或放到jsfiddle演示中。

<pre>{{ countries }}</pre>

确保从服务器获取正确的数据。

Answer 2

我记得做过Angular，并且在无法更新范围时遇到了一些麻烦，您可以尝试以下操作：

countryApp.controller('CountryCtrl', function($scope, $http){
  $http.get('countriesgdp.json').success(function(data) {
    $scope.countries = data;
  });
  $scope.$apply()
});

您可以尝试在获取请求之后添加范围应用功能。

此外，countrysgdp.json的结构可能不正确，您可能需要执行以下操作：

$scope.countries = data[0]

请您共享JSON文件的开头，以便我们确保结构正确，代码看起来不错并且可以正常工作。

Answer 3

实际上，如果您在控制台窗口中发现任何错误。只有我们才能提供确切答案。无论如何，请注意以下详细信息。

您应该将ng-repeat对象全局初始化为控制器顶部的数组。

 <script>
                    var countryApp = angular.module('countryApp', []);
                    countryApp.controller('CountryCtrl', function($scope, $http){
                        $scope.countries=[];// Should add this line
                        $http.get('countriesgdp.json').success(function(data) {
                                $scope.countries = data;
                        });
                    });
                </script>

因为会出现模块未定义错误。

并且$scope.countries的值应为数组格式。因为ng-repeate仅接受数据数组。因此，您应该检查服务是否返回数据数组或什么。

其余的代码对我来说很好。

Answer 4

是，将$ scope.countries更改为$ scope.countries

还使用console.log验证数据是否为空。

我正在尝试一个简单的ng-repeat示例，但无法正常工作

4 个答案: