[英]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.