Ionic Ion-refresher

admin

9 years ago

Ionic Ion-refresher : Ion-refresher is used to pull-to-refresh to scroll view. It basically puts the content before the ionicContent or ionicScroll element. Here we are going to explain this with ionicScroll and ionContent element example and demo.

Ionic Ion-refresher

Here is an example of Ion-refresher-

Ion-refresher Javascript Part

Ionic Ion-refresher example

angular.module('myApp', ['ionic'])
.controller('MyCtr', function($scope, $http) {
  $scope.items = ["Php"];
  $scope.refreshNow = function() {
    $http.get('/fresh-items')
     .success(function(freshItems) {
       $scope.items = freshItems;
     })
     .finally(function() {
       $scope.$broadcast('scroll.refreshComplete');
     });
  };
});

Try it »

Ion-refresher Html Part

Ion-refresher Html Example

<ion-content ng-controller="MyCtr">
<ion-refresher pulling-text="Refresh...">
</ion-refresher>

<ion-scroll>
<ion-list>
    <ion-item ng-repeat="item in items">{{item}}</ion-item>  
</ion-list>
</ion-scroll>
</ion-content>

Try it »