Pull To Refresh is another functionality made popular by the advent of mobile devices. Where Infinite Scroller works from the bottom, Pull To Refresh works from the top. The idea is to pull new data from the top of the page on vertical swipe, a loader should appear, and new content should become visible, simple as that.

Ionic Framework supports this feature through the ons-pull-hook directive. This article will also use another framework called Faker.js; it will generate fake data required to populate a list view in our example. We will call it again each time we initialize pull-to-refresh functionality.

Note: If this tutorial was helpful, you need further clarification, something is not working or you have a request for another Ionic post? Furthermore, leave me a comment below if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com. Thanks and have a nice day!

[spoiler title=” Click here if you want to see other tutorials, or articles about Ionic themes, templates, plugins …”]

Tutorials

Other Resources (themes, templates, plugins, Cordova plugins, starter apps)

Cordova Plugin Tutorials

[/spoiler]

Intro

<ion-refresher
    pulling-text="Refreshing..."
    on-refresh="populateList()">
</ion-refresher>

The ion-refresher directive allows you to add pull-to-refresh to a scrollView. Place it as the first child of your ionContent or ionScroll element.

The expression you pass in for on-refresh is called when the user initiates pull-to-refresh.

Warning: Do not forget to broadcast scroll.refreshComplete event, this feature will not work without it after first sucesfull function call.

Example

A short walk through, when this example first initializes it will generate ten random list elements; every call to ion-refresh function will produce one additional list item at the list top.

Demo

Embedded working example

Ionic Framework Pull To Refresh Example

Edit

HTML:

<html ng-app="starter">
 
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
  <title>Ionic Framework Example</title>
  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"/>
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  <script src="http://marak.com/faker.js/js/faker.js"></script>
  <script src="script.js"></script>
</head>
 
<body>
  
  <ion-nav-bar class="bar-positive">
    <ion-nav-back-button class="button-clear">
      <i class="ion-arrow-left-c"></i> Back
    </ion-nav-back-button>
  </ion-nav-bar>
  
  <ion-nav-view></ion-nav-view>
  
  <script id="home.html" type="text/ng-template">
    <ion-view view-title="Pull To Refresh Example">  
    
      <ion-content class="padding">

        <ion-refresher
          pulling-text="Refreshing..."
          on-refresh="populateList()">
        </ion-refresher>

        <ion-list>
          <ion-item collection-repeat="list in _list" class="item-thumbnail-left">
            <img ng-src="{{list.image}}">
            <h2>{{list.name}}</h2>
            <p>{{list.address}}</p>
            <p>{{list.phone}}</p>            
          </ion-item>
        </ion-list>
   
      </ion-content>
      
    </ion-view>
  </script>  

</body>
 
</html>

JavaScript:

var nameApp = angular.module('starter', ['ionic']);

nameApp.config(function($stateProvider, $urlRouterProvider) {
 
  $stateProvider
    .state('home', {
      url: '/',
      templateUrl: 'home.html',
      controller: 'HomeCtrl'
    });
  $urlRouterProvider.otherwise("/");
 
});


nameApp.controller('HomeCtrl', function($scope) {
  
  $scope._list = [];  

  $scope.populateInitialList = function() {
    for (var i = 0; i <= 9; i++) {
      $scope.populateList();
    }    
  }
  
  $scope.populateList = function() {
      var firstName = faker.name.firstName();
      var lastName = faker.name.lastName();      
      
      $scope._list.unshift({ name: firstName + " " + lastName, 
                          address: faker.address.streetAddress(),
                          phone: faker.phone.phoneNumber(),
                          image: faker.internet.avatar()
      });
      $scope.$broadcast('scroll.refreshComplete');
  }  

  $scope.populateInitialList();
});

Walkthrough

When HomeCtrl controller first initializes it will create an empty _list object; we’ll use it to store application list data:

$scope._list = [];

JavaScript will immediately populate it using a function call:

$scope.populateInitialList();

Application is calling these functions:

  $scope.populateInitialList = function() {
    for (var i = 0; i <= 9; i++) {
      $scope.populateList();
    }    
  }
  
  $scope.populateList = function() {
      var firstName = faker.name.firstName();
      var lastName = faker.name.lastName();      
      
      $scope._list.unshift({ name: firstName + " " + lastName, 
                          address: faker.address.streetAddress(),
                          phone: faker.phone.phoneNumber(),
                          image: faker.internet.avatar()
      });
      $scope.$broadcast('scroll.refreshComplete');
  }

Initially it will generate ten fake list elements using Faker.js.

Above list directive you’ll find pull-to-refresh directive:

<ion-refresher
    pulling-text="Refreshing..."
    on-refresh="populateList()">
</ion-refresher>

It’s configured to trigger a function populateList() when user pull to refresh.

Who Am I?

Between working as a senior Java developer in one of the largest insurance companies in the world and traveling, in my free time, I work as a professional mobile development adviser. I'm also a major jQuery Mobile supporter back at StackOverflow and a forum moderator at the official Ionic Framework forum.

Ionic Framework | Using Pull To Refresh

Table of Contents