Rajkumar K Rajkumar K - 5 months ago 22
AngularJS Question

How to use ion-refresher if the page has more than 1 div in ionic 1

I want to use ion-refresher for a html page which is having 3 div elements. Each div element will do different functions like allShow(), earnedShow() and redeemShow().

I'm using popover component to filter my data. For example, 'All' will have all data, 'Earned' will display only earned details and 'Redeemed' will display only redeemed details. I've written all the views in a single html itself. What I want is, when I'm in 'Earned' field, and if I'm trying to pull refresh the page means, only the function responsible to that div should appear, it should not go to 'All'

Please suggest a way how to use this



$scope.allShow = function()
{
$scope.All = true;
$scope.Earned = false;
$scope.Redeemed = false;

//some function
}
$scope.earnedShow = function()
{
$scope.All = false;
$scope.Earned = true;
$scope.Redeemed = false;
//some function
}
$scope.redeemShow = function()
{
$scope.All = false;
$scope.Earned = false;
$scope.Redeemed = true;
//some function
}

$scope.doRefresh = function() {

console.log('Refreshing!');
$timeout( function() {

// $scope.allShow();


$scope.allShow();
$scope.$broadcast('scroll.refreshComplete');

}, 500);

};

<ion-content scroll="true" >

<ion-refresher on-refresh="doRefresh()" pulling-text="Pull to refresh...">
</ion-refresher>

<div ng-show="All" >All
</div>
<div ng-show="Earned" >Earned
</div>
<div ng-show="Redeemed" >Redeemed
</div>
</ion-content>




Answer Source

You should refresh depending the current selected div. There are plenty simple solution, but for your logic:

$scope.doRefresh = function() {
  console.log('Refreshing!');
  $timeout( function() {    
    if ($scope.All === true) {
      $scope.allShow();
    }
    if ($scope.Earned === true) {
      $scope.earnedShow();
    }
    if ($scope.Redeemed === true) {
      $scope. redeemShow();
    }
    $scope.$broadcast('scroll.refreshComplete');
}, 500);

could be the solution