What about mixing "collection-repeat" and "ion-infinite-scroll?

ionic-v1
1

What do you think? Anyone has implemented this yet?

1 Like
2

It works, but in beta 4 there appears to be a bug with the loading spinner displaying at the bottom of the list properly. Iā€™m checking the forums quick to see if anyone else has had this issue and should open a ticket soon.

Otherwise itā€™s working great with this format:

 <ion-content class="has-header">
<ion-list>
  <ion-item ng-click="open(post.url)"
            class="item"
            collection-repeat="post in posts"
            collection-item-width="'100%'"
            collection-item-height="70"
            style="width:100%">
    <h2>{{post.title}}</h2>
  </ion-item>
</ion-list>
<ion-infinite-scroll
    icon="ion-loading-c"
    on-infinite="loadMoreData()">
</ion-infinite-scroll>
3

Can you write an example on CodePen?

Just want to see how to push the new posts into the posts list.

4

Oh sure, Iā€™ll try to get a codepen up in a bit, but hereā€™s what Iā€™m doing for the loadMoreData method. The concat method just adds one array to an existing array.

$scope.loadMoreData = function(){
  currentPage++;
  console.log('loading page '+currentPage);
  HNAPI.frontpage(currentPage).then(function(posts){
    $scope.posts = $scope.posts.concat(posts);
    $scope.$broadcast('scroll.infiniteScrollComplete');
    console.log($scope.posts);
  });
}

Iā€™ll be posting the entire codebase to github in a week or two

5

Iā€™m using the same code, but the list doesnā€™t update with the new rows.

The list of post increases, but the last element that I see in the browser is still the same.

6

Hmm, could you post some example markup / methods?

7 
<ion-view title="Articoli">
<ion-content ng-controller="ResourceIndexCtrl">
    <div id="search-bar">
        <form ng-submit="search()">
            <div class="item item-input-inset">
                <label class="item-input-wrapper" id="search-input">
                    <i class="icon ion-search placeholder-icon"></i>
                    <input type="text" placeholder="Cerca" ng-model="searchKey">
                </label>
            </div>
        </form>
    </div>
    <ion-list ng-controller="ResourceIndexCtrl">
        <ion-item class="item item-avatar my-item"
           collection-repeat="resource in resources"
           collection-item-width="'100%'"
           collection-item-height="70"
           ng-href="#/tab/articles/{{resource.id}}">
            <img ng-src="{{resource.image_url}}" alt="{{resource.name}}">

            <h2 class="list-name">{{resource.title}}</h2>

            <p>
                {{resource.published_at}} - {{resource.category_name}}
            </p>
        </ion-item>

    </ion-list>
    <ion-infinite-scroll
            icon="ion-loading-c"
            on-infinite="loadMore()">
    </ion-infinite-scroll>

</ion-content>


$scope.loadMore = function () {
        $timeout(function () {
            var resource = Restangular.all($stateParams.models);
            if ($scope.metadata.next_page) {
                resource.getList({"page": $scope.metadata.next_page}).then(function (resources) {
                    $scope.metadata = resources.metadata;
                    $scope.resources = $scope.resources.concat(resources);
                    $scope.$broadcast('scroll.infiniteScrollComplete');
                    console.log($scope.resources.length);
                });
            }
        }, 1000);
    };

console.log($scope.resources.length); prints every time 30, 60, 90 etc elements, but in the view I see only the first 30.

8

YEP!

Solved with the ā€œdistanceā€ attribute:

<ion-infinite-scroll
                icon="ion-loading-c"
                on-infinite="loadMore()"
                distance="20%">
        </ion-infinite-scroll>
9

Hi, I am new to this forum and using ionic framework. I ran into the spinner issue that you mentioned. Is this bug still being worked on ? There were no reference / links of a ticket being opened for this issue.

10

Hey, I also ran into this problem, with the spinner not showing at the bottom of a collection-repeat list.
Hereā€™s the code that Iā€™m using, wrapped in an ion-content:

<div class="list">
  <div class="item"
       collection-repeat="app in apps track by app.appId"
       collection-item-width="'100%'"
       collection-item-height="114"
       ng-style="{height:'114px'}">
      <app-directive app="app"></app-directive>
  </div>
</div>
<ion-infinite-scroll
  ng-if="total > apps.length"
  icon="ion-loading-c"
  on-infinite="loadApps()">
</ion-infinite-scroll>
11

@frictionlesspulley @bra1n I have the same problem: https://github.com/driftyco/ionic/issues/2376

12

@perry please upload the entire codebase in github.

13

@pulakb, itā€™s already there. https://github.com/driftyco/front-page Still a WIP, especially on Android, but it works well, just a few display bugs. Note, youā€™ll have to comment out some things around config vars.