Показать погрузчик перед тем, как ответ

Question

нужно показать загрузчик изображения перед тем, как ответ
я использовал код ниже:

HTML:

<div ng-app="myApp" ng-controller="customersCtrl"> 
    <div class="table-responsive"> 
     <table class="table table-striped table-hover table-condensed"> 
      <tr> 
       <th>Name</th> 
       <th>City</th> 
       <th>Country</th> 
      </tr> 
      <tr ng-repeat="x in cus_names"> 
       <td>{{x.Name}}</td> 
       <td>{{x.City}}</td> 
       <td>{{x.Country}}</td> 
      </tr> 
     </table> 
    </div> 
</div> 

JS:

var app = angular.module('myApp', []); 
app.controller('customersCtrl', function ($scope, $http) { 
    $http.get("http://www.w3schools.com/angular/customers.php").success(function (response) { 
     $scope.cus_names = response.records; 
    }); 
}); 

Спасибо заранее

Answer 1

Создать флаг ready и u чтобы показать или не показывать загрузочное изображение.

<div ng-app="myApp" ng-controller="customersCtrl"> 
    <div class="table-responsive"> 
     <table class="table table-striped table-hover table-condensed"> 
      <tr> 
       <th>Name</th> 
       <th>City</th> 
       <th>Country</th> 
      </tr> 
      <div ng-if="!ready"> 
       <!-- Put loading image here --> 
      </div> 
      <div ng-if="ready"> 
       <tr ng-repeat="x in cus_names"> 
        <td>{{x.Name}}</td> 
        <td>{{x.City}}</td> 
        <td>{{x.Country}}</td> 
       </tr> 
      </div> 
     </table> 
    </div> 
</div> 

JS

angular.module('myApp', []); 

angular.module('myApp").controller('customersCtrl', 
    function customersCtrl ($scope, $http) { 
     $scope.ready = false; 
     $http.get("http://www.w3schools.com/angular/customers.php" 
      ) .then (function (response) { 
       $scope.cus_names = response.data.records; 
       $scope.ready = true; 
      }) .catch (function (error) { 
       throw error; 
      }); 
    } 
); 

Обратите внимание, что метод .success теперь осуждается, и мы должны использовать .then теперь. Для получения дополнительной информации об этом см. AngularJS $http API Docs.