Wie Ion-Refresher zu verwenden, wenn die Seite mehr als 1 Div in ionischen 1

Question

hat Ich möchte Ion-Refresher für eine HTML-Seite verwenden, die 3 div Elemente hat. Jedes div-Element hat verschiedene Funktionen wie allShow(), earnedShow() und reademShow().

Ich verwende Popover-Komponente, um meine Daten zu filtern. Beispiel: "Alle" enthält alle Daten, "Gewonnen" zeigt nur die erspielten Details an und "Gelöscht" zeigt nur die eingelösten Details an. Ich habe alle Ansichten in einem einzigen HTML selbst geschrieben. Was ich will, ist, wenn ich im Feld "verdient" bin, und wenn ich versuche, aktualisieren Sie die Seite bedeutet, nur die Funktion zu diesem div erscheinen sollte, sollte es nicht gehen zu "Alle"

Bitte legen eine Art und Weise, wie diese verwenden

 $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() { 
 

 
\t \t // $scope.allShow(); 
 
    
 

 
\t $scope.allShow(); 
 
    $scope.$broadcast('scroll.refreshComplete'); 
 
    
 
    }, 500); 
 
     
 
    };

<ion-content scroll="true" > 
 

 
    \t <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 1

Sie aktualisieren sollten die aktuell ausgewählte div abhängig. Es gibt viele einfache Lösung, aber für Ihre Logik:

$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); 

die Lösung