我正在尝试一个简单的 ng-repeat 示例，但它不起作用
[英]I am trying a simple ng-repeat example and it is not working
问题描述
Below is the code I am trying.
下面是我正在尝试的代码。 How can I rectify the error?我该如何纠正错误？
<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>
4 个解决方案
解决方案1
0 2018-12-06 07:08:06
Is there any error log on console?控制台上是否有任何错误日志？ First, check it and then log data to console that returns server or try to display all the data on screen or put on jsfiddle demo.首先，检查它然后将数据记录到返回服务器的控制台或尝试在屏幕上显示所有数据或放在jsfiddle演示中。
<pre>{{ countries }}</pre>
Be sure to taking correct data from the server.确保从服务器获取正确的数据。
解决方案2
0 已采纳 2018-12-06 07:10:10
I remember doing Angular and having some trouble with scope not updating, you can try the following:我记得在做 Angular 时遇到了一些无法更新范围的问题，您可以尝试以下操作：
countryApp.controller('CountryCtrl', function($scope, $http){
$http.get('countriesgdp.json').success(function(data) {
$scope.countries = data;
});
$scope.$apply()
});
You can try adding a scope apply function after the get request.您可以尝试在 get 请求后添加范围应用函数。
Also it's possible that the structure of countriesgdp.json is incorrect, you might need to do something like this:也有可能 countrygdp.json 的结构不正确，您可能需要执行以下操作：
$scope.countries = data[0]
Please could you share the start of your JSON file so we can make sure the structure is correct, your code looks fine and should work.请您分享您的 JSON 文件的开头，以便我们确保结构正确，您的代码看起来不错并且应该可以工作。
解决方案3
0 2018-12-06 07:41:57
Actually if you found any error in console window .
- You should globally initialize ng-repeat object as array in top of the controller.您应该将 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> Because you will get module not defined error.因为你会得到模块未定义的错误。
- And
$scope.countriesvalues are should be an array format.而$scope.countries值应该是数组格式。 becauseng-repeateonly accept array of data.因为ng-repeate只接受数据数组。 So you should check if the service is returning array of data or what.所以你应该检查服务是否正在返回数据数组或什么。
rest of the code looks fine for me.其余的代码对我来说看起来不错。
解决方案4
-1 2018-12-06 06:40:35
yes change $ scope.countries to $scope.countries是的，将 $scope.countries 更改为 $scope.countries
also use console.log to verify that data is not empty.还可以使用 console.log 来验证数据不为空。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.