In my app, I am using a collection-repeat
to load a long list of objects and render them in a list of posts. I also have an <ion-refresher>
that is used to reload and re-render the list. Essentially, posts are held in an array of object which is stored in $scope.posts
. Initially I use the following code to retrieve posts:
PostService.getPosts(/*$scope.page*/).then(function (data) {
$scope.posts = data.posts;
$ionicLoading.hide();
});
Then, I use collection-repeat to render them:
<ion-view title="Feed" id="feed">
<ion-content padding="false" class="has-header" >
<ion-refresher pulling-text="Pull to refresh..." on-refresh="doRefresh()"></ion-refresher>
<div class="list card" collection-repeat="post in posts">
<!-- render stuff -->
</div>
</ion-view>
And this function refreshes posts:
$scope.doRefresh = function () {
$scope.posts = [];
PostService.getPosts(/*0*/).then(function (data) {
$scope.posts = data.posts
});
$scope.$broadcast('scroll.refreshComplete');
};
On the initial load, everything run fine all the posts are loaded correctly. If I pull to refresh however, things go bad. With no new posts added, I pull to refresh and it adds all the already loaded posts again so there are two of every post. What am I doing wrong?