Ionic Spinner not showing up

Question

I fill a Ionic collection-repeat list with a http-request, but I don't want to load everything directly into the DOM. So I'm only displaying a few of the items and add the rest of them when you scroll down. For that I have implemented the infinite-scroll function. It should show a spinner, when I get to the bottom of the page but it doesn't. The items do show up at least.

Here is the Code:

HTML:

<!DOCTYPE html>
<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href=" http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
  </head>
  <body ng-controller="MyCtrl">

    <ion-pane>
      <ion-header-bar class="bar-positive">
        <h1 class="title">Ionic Refresher testApp</h1>
      </ion-header-bar>
      <ion-content>
       <ion-refresher on-refresh="doRefresh()" spinner="bubbles"></ion-refresher>
      <ion-list>
        <ion-item class="item-thumbnail-left" collection-repeat="item in items | limitTo:numberOfItemsToDisplay">
        <img src="img/ionic.png" class="circle">
        <p>Link</p>
    <h2>{{item.id}}</h2>
    <h2>{{item.title}}</h2>
        </ion-item>
       <i class="icon ion-ios-arrow-right"></i>
        <ion-infinite-scroll
    on-infinite="addMoreItem()"
    distance="1%" spinner="bubbles">
  </ion-infinite-scroll>
      </ion-list>
      </ion-content>
    </ion-pane>
  </body>
</html>

App.js:

angular.module('ionicApp', ['ionic'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

      // Don't remove this line unless you know what you are doing. It stops the viewport
      // from snapping when text inputs are focused. Ionic handles this internally for
      // a much nicer keyboard experience.
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

.factory('TweetService', function($http){
  var BASE_URL = "http://jsonplaceholder.typicode.com/posts";
  var items = [];



  return {
    GetFeed: function(){
      return $http.get(BASE_URL).then(function(response){
        items = response.data;
        return items;
      });
    },
    GetNewTweets: function(){
      return $http.get(BASE_URL).then(function(response){
        items = response.data;
        return items;
      });
    }
  }
})

.controller('MyCtrl', function($scope, $timeout, TweetService) {
  $scope.items = [];
  $scope.numberOfItemsToDisplay = 5;

  TweetService.GetFeed().then(function(items){
  $scope.items = items;
  });

   $scope.addMoreItem = function() {
        if ($scope.items.length > $scope.numberOfItemsToDisplay)
          $scope.numberOfItemsToDisplay += 5; // load 5 more items
        $scope.$broadcast('scroll.infiniteScrollComplete');
      };

  $scope.doRefresh = function() {
    TweetService.GetNewTweets().then(function(items){
      $scope.items = items;

      //Stop the ion-refresher from spinning
      $scope.$broadcast('scroll.refreshComplete');
    });
  };

});

where is that app.js file in which folder????

lewis4u
– lewis4u

2016-06-08 09:42:31 +00:00
Commented Jun 8, 2016 at 9:42 — lewis4u
– lewis4u, Commented Jun 8, 2016 at 9:42

Merge-pony · Accepted Answer · 2016-04-29 14:17:29Z

1

Unfortunately it's not solve yet. There are share one more problem with infinite-scrolling

https://forum.ionicframework.com/t/infinite-scrolling-and-collection-repeat-spinner-not-shown/14358

answered Apr 29, 2016 at 14:17

Merge-pony

1,7484 gold badges18 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

koneri ranjith kumar · Accepted Answer · 2017-03-30 09:32:11Z

Try this snippet it works...

//css
.my-spinner{
z-index: 99999999 !important;
position: absolute;
bottom:0px;
left:45%;
right:45%;
}


//template
<ion-infinite-scroll
    ng-if="!noMoreItemsAvailable"
    icon="ion-load-d"
    on-infinite="getpagenation()"
    distance="1%">
  </ion-infinite-scroll>

<div  ng-if="!noMoreItemsAvailable">
      <ion-spinner ng-show="ItemLoading" icon="ios" class="spinner spinner-ios my-spinner">
</div>



//js
$scope.getpagenation = function() {
        $scope.ItemLoading = true;
 //you can call services

 //have items
        $scope.ItemLoading = false;
 //no more items
        $scope.noMoreItemsAvailable = true;
        $scope.ItemLoading = false;
        $scope.$broadcast('scroll.infiniteScrollComplete');
}

Collectives™ on Stack Overflow

Ionic Spinner not showing up

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related