[英]Ionic Framework infinite scroll with http get data
I've just started using ionic framework (brilliant) and i'm new to angular.我刚开始使用 ionic 框架(很棒),我是 angular 的新手。 I have a web service running and the app is supposed to load data.
我有一个 Web 服务正在运行,该应用程序应该加载数据。 I've managed to retrieve data, put, WordPress rest API is sending data in form of pages, and i don't know how to achieve that with
infinite-scroll
on tabs, here is my HTML markup:我已经设法检索数据,放置,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>
And in my apps.js i have:在我的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();
});
}
The second function does load the data, but does not append it to the original data.第二个函数确实加载数据,但不会将其附加到原始数据。 Thank you for your time.
感谢您的时间。
PS I've viewed many codepen examples, however, i cant seem to get them working. PS 我已经查看了许多 codepen 示例,但是,我似乎无法让它们工作。
EDIT:编辑:
Okay, I've managed to narrow down the problem.好的,我已经设法缩小了问题的范围。 I was misusing the controllers now i get the data, but the new data replaces the old data.
我现在正在滥用控制器,现在我得到了数据,但新数据取代了旧数据。
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;
});
};
I understand $scope.posts = items.posts
is wrong, i just cant find a way to append it.我知道
$scope.posts = items.posts
是错误的,我只是找不到附加它的方法。
Got it working :)得到它的工作:)
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;
});
};
Try尝试
$scope.posts = $scope.posts.concat(items.posts);
instead反而
$scope.posts=items.posts;
comment this line //$scope.newsletters.push(data);注释这一行 //$scope.newsletters.push(data); it add as another item entire data.
它将整个数据添加为另一个项目。
Thank you this saved me hours.谢谢你这节省了我几个小时。
I modified mine to work with $resource
for my Factory but it's essentially the same...我修改了我的以使用
$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;
});
};
Although I am getting an extra blank item at the bottom of 10 items.虽然我在 10 个项目的底部得到了一个额外的空白项目。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.