Ion-infinite-scroll with cards

ionic-v1
1

Hi I’m curious if you can use ion-infinite-scroll with the cards CSS. Here’s my code

View

  <ion-content>

  <div class="list card" ng-repeat="post in posts">

    <div class="item item-avatar">
      <img ng-src="{{ post.avatar }}">
      <h2>{{ post.name }}</h2>
      <p>{{ post.date_posted | date:'longDate' }}</p>
    </div>

    <div class="item item-body">
      <p style="margin-top: 0px">{{ post.text }}</p>
    </div>

  </div>

  <ion-infinite-scroll
    on-infinite="getPosts()"
    distance="1%">
  </ion-infinite-scroll>

</ion-content>

Controller

.controller('AppCtrl', function($scope, $http){

  $scope.posts = [];

  $scope.getPosts = function() {

    $http.post('http://localhost:5000/post/test', {})
      .success(function(res){
        
        $scope.posts = $scope.posts.concat(res.posts);

      })

  };

})

It fires and gets my posts when the view is loaded, but when I scroll to the bottom, it just shows the spinner and doesn’t grab new posts.

Thanks

1 Like
2

Nvm my issue was not adding

$scope.$broadcast('scroll.infiniteScrollComplete');

in my getPosts() function!

1 Like
3

@seanhill I’m using cards as well and v1.0.0-beta.13 and I cannot get the loadMore() function to fire. Any hints?

	<div class="list card" ng-repeat="obj in appData | limitTo:numberOfItemsToDisplay">
		<div class="item item-avatar">
			<!-- <img src="mcfly.jpg"> -->
			<h2>Marty McFly</h2>
			<p>{{obj._edited}}</p>
		</div>

		<div class="item item-body">
			<p>
  				This is a "Facebook" styled Card. The header is created from a Thumbnail List item, the content is from a card-body consisting of an image and paragraph text. The footer consists of tabs, icons aligned left, within the card-footer.
			</p>
			<p>
  				<a href="#" class="subdued">1 Like</a>
  				<a href="#" class="subdued">5 Comments</a>
			</p>
		</div>

		<div class="item tabs tabs-secondary tabs-icon-left">
			<a class="tab-item" href="#">
  				<i class="icon ion-thumbsup"></i>
  				Like
			</a>
			<a class="tab-item" href="#">
  				<i class="icon ion-chatbox"></i>
  				Comment
			</a>
			<a class="tab-item" href="#">
  				<i class="icon ion-share"></i>
  				Share
			</a>
		</div>
	</div>

	<ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="10%"></ion-infinite-scroll>
4

@mkamyszek does changing the distance to 1% help at all? Here’s what I’m doing.

View code

<ion-content>

    <div class="list card" ng-repeat="post in posts">

        <div class="item item-avatar">
            <img ng-src="{{ post.avatar }}">
            <h2>{{ post.name }}</h2>
            <p>
                <time-ago from-time="{{ post.date_posted }}"></time-ago>
            </p>
        </div>

        <div class="item item-image">
            <img ng-src="{{ post.image }}"></img>
        </div>

        <div class="item item-body" ng-if="post.text">
            <p style="margin-top: 0px">{{ post.text }}</p>
        </div>

    </div>

    <ion-infinite-scroll
        on-infinite="getPosts()"
        distance="1%">
    </ion-infinite-scroll>

</ion-content>

JS Code

$scope.posts = [];

$scope.getPosts = function() {

  $http.post('<url>', {})
    .success(function(res){
      $scope.posts = $scope.posts.concat(res.posts);  
    })
    .finally(function() {
      $scope.$broadcast('scroll.infiniteScrollComplete');
      $scope.$broadcast('scroll.refreshComplete');
    });

};

Hope this helps!

5

I found the issue, it was in my code. I was using $q.all to query a number of api services and my loadMore() function was inside .then(). I moved it outside of this and it worked as expected.