It's hard to say love with ionic

ionic-v1
1

Can you find the issue?

            <!-- This will not show the loading icon
            <ion-list class="sign-list" option-buttons="itemButtons">
              <ion-item ng-repeat="item in items">
                  {{$index}}
              </ion-item>
            </ion-list>
            -->    
            <!-- This will show the loading icon, but half of it -->
            <ul class="list">
              <li class="item" ng-repeat="item in items">
                {{$index}}
              </li>
            </ul>

Even though ionic is promising, but I regret using ionic as my basic framework now. Maybe should use it later and more later, I’m sorry to express my felling so straight.

2

First of all I would use beta version instead nightly build.

Secondly, you invoked infinite-scroll but didn’t provide onInfiniteScroll method.

 <ion-infinite-scroll on-infinite="onInfiniteScroll()" distance="1%" icon="ion-loading-c">
      </ion-infinite-scroll>

This is a reason why you get loader at the bottom.

Regards,

3

@shoustin Thanks for your response, I have change the code, but it still shows half of the loading image.

    $scope.onInfiniteScroll = function() {    
      $scope.items = $scope.items.concat([{},{},{},{},{},{},{},{},{},{}])      
    };
    $scope.onInfiniteScroll();

The main issue is when I change the content list to

<ion-list class="sign-list" option-buttons="itemButtons">
              <ion-item ng-repeat="item in items">
                  {{$index}}
              </ion-item>
            </ion-list>

, the loading image doesn’t show.

You can toggle the comment of the code and watch the difference of the result.

            <!-- This will not show the loading icon
            <ion-list class="sign-list" option-buttons="itemButtons">
              <ion-item ng-repeat="item in items">
                  {{$index}}
              </ion-item>
            </ion-list>
               -->  
            <!-- This will show the loading icon, but half of it-->
            <ul class="list">
              <li class="item" ng-repeat="item in items">
                {{$index}}
              </li>
            </ul>
4

Missing $scope.$broadcast('scroll.infiniteScrollComplete'); in method: $scope.onInfiniteScroll()

See fixed Demo