[英]Ionic Framework infinite scroll with http get data
我剛開始使用 ionic 框架(很棒),我是 angular 的新手。 我有一個 Web 服務正在運行,該應用程序應該加載數據。 我已經設法檢索數據,放置,WordPress rest API 正在以頁面的形式發送數據,我不知道如何通過選項卡上的infinite-scroll
來實現這一點,這是我的 HTML 標記:
<ion-view title="All Wallpapers">
<ion-content ng-controller="MyCtrl">
<div class="row" >
<div ng-controller="PostsController" >
<div ng-repeat="post in posts">
<div class="col col-50">
<div class="list card">
<div class="item item-image">
<img ng-src="{{post.thumbnail}}"></>
</div>
<a class="item item-icon-left assertive" href="#">
<i class="icon ion-android-image"></i>
{{post.thumbnail_images.full.width}} x {{post.thumbnail_images.full.height}}
</a>
</div>
</div>
</div>
</div>
</div>
<ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="1%"></ion-infinite-scroll>
</ion-content>
</ion-view>
在我的apps.js 中,我有:
wallweight.controller('PostsController', function($scope, $http) {
$scope.page = 1;
var url='http://wallweight.com/api/get_recent_posts?page';
$http.get(url).
success(function(data, status, headers, config) {
$scope.posts = data.posts;
console.log(data);
}
).
error(function(data, status, headers, config) {
});
});
function MyCtrl($scope, $http) {
$scope.posts = [];
$scope.loadMore = function() {
$http.get('http://wallweight.com/api/get_recent_posts?page=2').success(function(items) {
$scope.posts.push($scope.posts.items);
$scope.$broadcast('scroll.infiniteScrollComplete');
});
};
$scope.$on('$stateChangeSuccess', function() {
$scope.loadMore();
});
}
第二個函數確實加載數據,但不會將其附加到原始數據。 感謝您的時間。
PS 我已經查看了許多 codepen 示例,但是,我似乎無法讓它們工作。
編輯:
好的,我已經設法縮小了問題的范圍。 我現在正在濫用控制器,現在我得到了數據,但新數據取代了舊數據。
function MyController($scope, $http) {
$scope.posts = [];
$scope.page=1;
$scope.loadMore = function() {
$http.get('http://wallweight.com/api/get_recent_posts?page='+$scope.page).success(function(items) {
$scope.posts=items.posts;
console.log(items.posts);
$scope.$broadcast('scroll.infiniteScrollComplete');
console.log($scope.page);
$scope.page +=1;
});
};
我知道$scope.posts = items.posts
是錯誤的,我只是找不到附加它的方法。
得到它的工作:)
function MyController($scope, $http) {
$scope.posts = [];
$scope.page=1;
$scope.loadMore = function() {
$http.get('http://wallweight.com/api/get_recent_posts?page='+$scope.page).success(function(items) {
var i = items.posts.length;
$scope.posts = $scope.posts.concat(items.posts);
$scope.posts.push(items);
console.log(items.posts[0]);
$scope.$broadcast('scroll.infiniteScrollComplete');
console.log($scope.page);
$scope.page +=1;
});
};
嘗試
$scope.posts = $scope.posts.concat(items.posts);
反而
$scope.posts=items.posts;
注釋這一行 //$scope.newsletters.push(data); 它將整個數據添加為另一個項目。
謝謝你這節省了我幾個小時。
我修改了我的以使用$resource
為我的工廠工作,但它本質上是相同的......
$scope.loadMore = function() {
moreNewsletters = WPFactory.query({
'page' : $scope.pageNum,
'filter[posts_per_page]': 10,
param1: 'posts',
'filter[cat]': 8,
'filter[orderby]': 'ID',
}, function(data,responseHeaders) {
angular.forEach(moreNewsletters, function(value, key) {
value.image1 = ThumbnailFactory.getThumbnail(value.content);
});
var i = data.length;
$scope.newsletters = $scope.newsletters.concat(data);
$scope.newsletters.push(data);
$scope.$broadcast('scroll.infiniteScrollComplete');
$scope.pageNum +=1;
});
};
雖然我在 10 個項目的底部得到了一個額外的空白項目。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.