Pull to refresh

The idea is to load in new items to the top of a feed by pulling down from the top of the list until you see a loading indicator, letting go, and watching as new items magically (not really) add themselves in.

 Ionic has an awesome directive that has undergone a redo fairly recently to accomplish exactly this.

ionRefresher (Pull to Refresh Directive)

The Ionic directive we are going to use is the ion-refresher

 The most basic usage is as follows:

<ion-refresher on-refresh="doRefresh()"></ion-refresher>

 on-refresh should point to a $scope function that gets the new data, updates a list, and then lets the refresher know it is done. This refresher should be above some kind of list.


 Example

<ion-refresher on-refresh="doRefresh()"></ion-refresher>
<ion-list>
  <ion-item class="item-avatar" ng-repeat="item in items">
    <img src="{{item.user.picture.thumbnail}} " />
    ## {{item.user.name.first}} {{item.user.name.last}}
    <p>{{item.user.location.city}} {{item.user.password}}</p>
  </ion-item>
</ion-list>

 

Factory

In our example, we’re going to be making a call to the Random User API to get some data to play with. To do this, we’ll create a factory that makes these API calls. This factory will have two methods: GetFeed and GetNewUser. GetFeed will be called when our app loads to get the initial data, and the GetNewUser will be called each time we do a pull to refresh.

.factory('PersonService', function($http){
  var BASE_URL = "http://api.randomuser.me/";
  var items = [];

  return {
    GetFeed: function(){
      return $http.get(BASE_URL+'?results=10').then(function(response){
        items = response.data.results;
        return items;
      });
    },
    GetNewUser: function(){
      return $http.get(BASE_URL).then(function(response){
        items = response.data.results;
        return items;
      });
    }
  }
})

Controller

Our controller needs to do 2 things:

1. Fill the feed with the initial items
2. Handle the pull to refresh

First, to fill our feed, we’ll want to make a call to the PersonService and assign the result to the $scope.items array.
Next, we need to handle the pull to refresh. Recall we configured our directive to call a doRefresh function.
In this function, we should call the GetNewUser function and add these items to the beginning of the array.

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

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

  $scope.doRefresh = function() {
    PersonService.GetNewUser().then(function(items){
      $scope.items = items.concat($scope.items);

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

});