ionic 向後台請求json 數據 在頁面上的顯示問題

时间:2023-01-28 15:57:39

我向服務器請求數據,獲取到的數據竟然不能顯示在頁面上  我那個氣啊.....

 <ul>
<!-- <li ng-repeat="phone in phones">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li> -->
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>

頁面上綁定了數據

創建服務  HomeExchangeList

 .service('HomeExchangeList', function($rootScope, $http, $log) {
this.getHomeExchange = function() {
var rates = $http({
method: 'GET',
url: 'http://www.w3schools.com//website/Customers_JSON.php'
}).success(function(data) {
$log.log(data);
// removed your return data; it doesn't do anything, and this success is only added to log the result. if you don't need the log other than for debugging, get rid of this success handler too.
}); return rates;
};
})

在控制器中 調用數據

 .controller('DashCtrl', function($scope, HomeExchangeList) {
HomeExchangeList.getHomeExchange().success(function(data) {
$scope.names = data
});
})

注:

這裏的控制器 注入了HomeExchangeList 服務 ;然後調用服務HomeExchangeList 的getHomeExchange()函數 ,在回調函數.success(function(data){ })裏面綁定數據 只有這樣才能顯示

2. 另外一種

創建服務 phoneService

 .factory('phoneService', function($http, $q) {
return {
getPhones: function() {
var deferred = $q.defer();
$http.get('http://www.w3schools.com//website/Customers_JSON.php').success(function(data) {
console.log('success');
deferred.resolve(data);
}).error(function(){
console.log('error');
deferred.reject();
});
return deferred.promise;
}
}
})

創建控制器

 .controller('DashCtrl2', function($scope,phoneService) {

   phoneService.getPhones().then(function(data) {
$scope.names = data;
});
})

注:

服務phoneService 中有promise 的影響 ;所以在控制器中注入phoneService 服務時 ,調用服務的函數 需要 .then(function(data){}) 裏面綁定數據

3. 還有這種

.factory('Recipe',['$resource',function($resource){
return $resource('http://www.w3schools.com//website/Customers_JSON.php');
}])
.factory('loadRecipes',['Recipe','$q',function(Recipe,$q){
return function(){
var defer = $q.defer();
Recipe.query(function(recipes){
defer.resolve(recipes)
},function(){
defer.reject();
});
return defer.promise;
}
}]);

控制器為

.controller('DashCtrl1', function($scope,loadRecipes) {

  loadRecipes().then(function(data) {
$scope.names = data;
}); })

這種跟第二種一樣的原理......