在Json數據中使用ng-repeat

當我嘗試一個簡單的應用程序時，我無法使用ng-repeat顯示json數據。在控制檯上，顯示Json文件中的數據。拋出的錯誤是[ngRepeat：dupes]。我正在使用Google Chrome和Xampp。在Json數據中使用ng-repeat

<html ng-app="myAPP"> 
<script> 
var myapp = angular.module("myAPP", []); 

myapp.controller('simplectrl', function($scope, $http) { 

$http.get('countries.json').success(function(data) { 
    console.log(data); 
    $scope.countries=data; 

    }); 
}); 



</script> 


<body ng-controller="simplectrl"> 

<h3> Country Data </h3> 

<table> 
    <tr> 
    <th> Country </th> 
    <th> Population </th> 
    </tr> 


    <tr ng-repeat="country in countries track by country.name" > 
    <td> {{country.name}}</td> 
    <td>{{country.population}}</td> 
    </tr> 
</table> 

</body> 
</hmtl>

Countries.json：

{ "countries" :[ 
       { "name": "China", "population" :"1.4billion" }, 
       { "name": "India", "population" :"1.2billion" }, 
       { "name": "USA", "population":"300million" } 
]};

我跟着一些SO建議沒有成功的解決方案。有些建議使用track $ index或ng-repeat中的country.name跟蹤。請幫助我。感謝

來源

2014-09-24 kishan

追蹤$索引而不是？ – 2014-09-24 06:52:58

你有不止一次的國名嗎？ – 2014-09-24 06:55:05

使用$ index索引沒有錯誤，仍然不顯示名稱和流行。 – kishan 2014-09-24 07:07:06

正如馬修貝爾坦說你應該改變執行回調GET方法的。

.success(function(data) { 
    $scope.countries=data.countries; 
});

我已爲您創建JSFiddle工作示例。

來源

2014-09-24 08:14:51

感謝您的示例。 JSFiddle示例工作正常。但是，當我在本地服務器上的文件中嘗試，國家名稱和人口不顯示。可能是什麼問題呢？ – kishan 2014-09-24 08:32:59

@ kishan，如果您在本地機器上使用我的JSFiddle示例，請更改'GET'上的請求類型並更改URL。我使用JSFiddle API來模擬JSON響應。 – 2014-09-24 08:42:50

只是改變了回調的get方法

$http.get('countries.json').success(function (data) { 
    $scope.countries = data.countries; // because actually countries is an object with a key countries containing all country 
});

來源

2014-09-24 07:39:08

我在代碼中發現的另一個錯誤是將分號放在JSON文件的末尾。正如指出的那樣，對於寫入JSON文件的數據，該語句必須爲$scope.countries= data.countries。要使用$scope.countries= data，應修改JSON文件中的數據。對不起，如果我浪費了任何人的時間與我的愚蠢的錯誤。

爲了糾正這個問題，我讀了大約20個關於這個主題的問題，花了幾個小時。在這個過程中，這是很好的學習。這些愚蠢的錯誤通常比大問題花費很多時間。 新手在學習任何編程語言時必須注意語法錯誤（自注）。

來源

2014-09-24 14:47:57 kishan

在Json數據中使用ng-repeat

回答

相關問題