如何使用离子清新剂

时间:2017-07-11 06:13:36

标签: angularjs ionic-framework

我想知道如何在我的主页上使用离子复习器。我希望能够更新那里显示的数据,我不知道如何在我的控制器中执行此操作。 有人可以帮助我,因为我找不到使用数据库的例子。

我的控制器:

.controller('homeCtrl', function ($scope, $state, $http, $ionicLoading, AppService) {
        console.log("called");
        $ionicLoading.show();
        AppService.user().then(function (response) {
          $scope.prenom = response.pnom;
        });
        AppService.statNational().then(function (response) {
          $scope.nbVisite = response.nbVisite;
        });
        AppService.CRlist().then(function (response) {
          $scope.liste = JSON.parse(JSON.stringify(response));
          $scope.limit = 3;
          $ionicLoading.hide();
        });
        $scope.showDescr = function (currObj) {
          AppService.addObject(currObj);
          $state.go('menu.compteRendu');
        }
        AppService.refreshToken().then(function (response) {
          if ($scope.token) {
            console.info('Refresh');
          }
        });
      })

我的观点:

<ion-view title="Home" hide-back-button="true" id="page1">
      <ion-nav-buttons side="left">
        <button menu-toggle="left" class="button button-icon button-clear ion-navicon menu-icon"></button>
      </ion-nav-buttons>
      <ion-content padding="true" class="has-header">
      <ion-refresher on-refresh="doRefresh(true)">
        <ion-refresher-content
          pullingIcon="arrow-dropdown"
          pullingText="Pull to refresh"
          refreshingSpinner="circles"
          refreshingText="Refreshing">
        </ion-refresher-content>
      </ion-refresher>
        <div id="accueil-markdown4" style="text-align:center;" class="show-list-numbers-and-dots">
          <p style="color:#2f81b7;font-size:20px;">Hello {{ prenom | UpFirstLetter }} !</p>
        </div>
        <hr/>
        <div class="item-verte">
          <ion-list id="accueil-list14">
            <ion-item class="item-thumbnail-left accueil-item-vert" id="accueil-list-item35">
              <h2 class="accueil-blanc">Décompte Visites</h2>
              <p class="accueil-blanc">Le nombre de visites réalisées</p>
              <img class="icon-accueil" src="img/icon-acceuil-1.png">
            </ion-item>
          </ion-list>
          <div class="item item-body" id="accueil-list-item-container6">
            <div id="accueil-markdown13" class="show-list-numbers-and-dotss">
              <p>{{nbVisite || 'Chargement..'}} Visites</p>
            </div>
          </div>
        </div>
        <div class="spacer"></div>
        <div class="accueil-container4">
          <ion-list id="accueil-list12">
            <ion-item class="item-thumbnail-left" id="accueil-list-item36">
              <h2 class="accueil-blanc">Dernières Visites</h2>
              <p class="accueil-blanc">Les comptes-rendus des visites</p>
              <img class="icon-accueil" src="img/icon-acceuil-2.png">
            </ion-item>
            <ion-item class="item-icon-right blanc-cr" id="accueil-list-item31" ng-repeat="element in liste | limitTo:limit">
              <div class="compte-rendu-style" ng-click="showDescr(element)">
                <div>
                  <span style="font-weight:bold">Compte-rendu</span> 
                  <span> {{ element.dateVisite.date | dateOnly: "dd MMMM y"}}</span>
                  <div class="item-note">
                    <p class="capitalize" ng-bind-html="element.patientPnom">{{ element.patientPnom | UpFirstLetter }} </p>
                    <i class="icon ion-ios-arrow-right icon-cr"></i>
                  </div>
                </div>
              </div>
            </ion-item>
          </ion-list>
        </div>
         <hr/>
      </ion-content>
    </ion-view>

提前感谢您的回答

1 个答案:

答案 0 :(得分:1)

你可以在你的控制器中做到这一点:

$scope.doRefresh= function () {
  AppService.statNational().then(function (response) {
    $scope.nbVisite = response.nbVisite;
  });
  AppService.CRlist().then(function (response) {
    $scope.liste = JSON.parse(JSON.stringify(response));
    $scope.limit = 3;
    $ionicLoading.hide();
  });
  $scope.$broadcast('scroll.refreshComplete');
};
$scope.doRefresh();

并在您看来:

<ion-refresher on-refresh="doRefresh()">
    <ion-refresher-content
      pullingIcon="arrow-dropdown"
      pullingText="Pull to refresh"
      refreshingSpinner="circles"
      refreshingText="Refreshing">
    </ion-refresher-content>