Pull down refresh dei dati in Ionic

Molte app, Instagram e Facebook su tutte, usano fare il refresh dei dati con un pull-down della schermata (non so come chiamarla).

Anche Ionic permette di fare la stessa cosa, anche in maniera molto semplice.

Partiamo dal controller, dove prendiamo i dati.

I dati li prenderemo da un web service remoto in formato JSON:

        .controller('ClientiCtrl', function ($scope, $http) {
            $scope.doRefresh = function () {
                    $http.get("http://www.sito.com/dati.php")
                            .then(function (response) {
                                $scope.items = response.data;
                            }, function (response) {
                                // ERRORE
                            });
            }
            $scope.doRefresh();
        })

Abbiamo aggiunto un metodo doRefresh, che recupera i dati tramite $hhtp.get.

In avvio di controller, riempiamo la lista; quello stesso metodo lo richiameremo dopo.

Ecco la ion-list:

<ion-view view-title="Clienti">
    <ion-content>
        <ion-refresher pulling-text="Refresh..." on-refresh="doRefresh()"></ion-refresher>
        <ion-list>
            <ion-item ng-repeat="item in items" href="#/app/{{item.codice}}">
                <h2>{{item.codice}}</h2>
                <p>{{item.rag_soc}}</p>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

Abbiamo quindi una lista riempita, ed un refresher impostato in attesa di un evento.

L'elemento ion-refresher fa due cose:

• mostra il testo impostato nel pulling-text
• richiama la funzione nel controller per ricaricare i dati

A questo punto dovete solo fare il pull-down della schermata per fare il refresh dei dati.

Enjoy!