2016-03-07 21 views
0

對AngularJs來說是新手,並且堅持使用$ http異步獲取數據,但不綁定/顯示數據。

console.log顯示數據正在通過。但是,由於數據是異步進入的,因此數據在頁面已經加載後進入。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 

 
<title>Iterate over data from Webservice.</title> 
 
<script 
 
\t src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 

 
<!-- This is the angularjs magic. --> 
 
<script> 
 
\t var app = angular.module('myApp', []); 
 
\t app.controller('myController', function($scope, $http) { 
 

 
\t \t /* Lets get some data from an actual service. */ 
 
\t \t $http.get("http://www.w3schools.com/angular/customers.php").then(
 
\t \t \t \t function(response) { 
 
\t \t \t \t \t console.log("This is what came back -" 
 
\t \t \t \t \t \t \t + response.data.records); 
 
\t \t \t \t \t $scope.names = response.data.records; 
 
\t \t \t \t }); 
 
\t }); 
 
</script> 
 

 

 
</head> 
 
<body> 
 

 
\t <h1>Get data from a webservice and show it on the page.</h1> 
 

 
\t <div ng-app="myApp" ng-controller="myController"> 
 

 
\t \t <ul> 
 
\t \t \t <li ng-repat="x in names">Name[{{x.Name}}]</li> 
 
\t \t </ul> 
 
\t </div> 
 

 
</body> 
 
</html>

+3

你有拼寫錯誤'NG-repat' – elclanrs

回答

2

變化ng-repatng-repeat

var app = angular.module('myApp', []); 
 
\t app.controller('myController', function($scope, $http) { 
 

 
\t \t /* Lets get some data from an actual service. */ 
 
\t \t $http.get("http://www.w3schools.com/angular/customers.php").then(
 
\t \t \t \t function(response) { 
 
\t \t \t \t \t console.log("This is what came back -" 
 
\t \t \t \t \t \t \t + response.data.records); 
 
\t \t \t \t \t $scope.names = response.data.records; 
 
\t \t \t \t }); 
 
     
 
     $scope.test = "tes1t"; 
 
     
 
\t });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body> 
 

 
\t <h1>Get data from a webservice and show it on the page.</h1> 
 

 
\t <div ng-app="myApp" ng-controller="myController"> 
 

 
\t \t <ul> 
 
\t \t \t <li ng-repeat="x in names">Name[{{x.Name}}]</li> <!-Here ng-repeat -> 
 
\t \t </ul> 
 
\t </div> 
 

 
</body>

+0

感謝。我應該花更多時間來獲得一套好的開發工具。 – mishtusorous

+1

@mishtusorous你現在在使用什麼..建議你使用Sublime Text或Brackets,如果你正在使用角度 – Catmandu

+0

我目前使用的是Eclipse。我需要一些具有自動完成功能的東西。 – mishtusorous