如何使用加载 gif 图像直到 angular js 网格加载

Question

我有一个 angular js table 会在一段时间内加载。我想在加载之前显示加载 gif 图像。我看过多个示例，但无法理解，因为我是 angular JS 的新手。

app.js代码

var app = angular.module('myApp', ['ui.bootstrap']);

app.filter('startFrom', function() {
return function(input, start) {
    if(input) {
        start = +start; //parse to int
        return input.slice(start);
    }
    return [];
 }
});
app.controller('customersCrtl', function ($scope, $http, $timeout) {
    $http.get('ajax/getCustomers.php').success(function(data){
        $scope.list = data;
        $scope.currentPage = 1; //current page
        $scope.entryLimit = 5; //max no of items to display in a page
        $scope.filteredItems = $scope.list.length; //Initially for no filter  
        $scope.totalItems = $scope.list.length;
  });
  $scope.setPage = function(pageNo) {
    $scope.currentPage = pageNo;
  };
  $scope.filter = function() {
    $timeout(function() { 
        $scope.filteredItems = $scope.filtered.length;
    }, 10);
};
$scope.sort_by = function(predicate) {
    $scope.predicate = predicate;
    $scope.reverse = !$scope.reverse;
};
});

如何才能在屏幕上加载 ng-repeat table 之前显示 gif 图像。请帮忙

Answer 1

我看不到你的观点，但这是我会做的。在控制器中将变量 "loading" 设置为 true。然后当 http 请求完成时，将 loading 设置为 false。在您的视图中设置一个 div 并在其中设置加载 gif 以在加载为真时显示，在加载为假时隐藏。将您的主要内容设置为在 loading 为 false 时显示，在 loading 为 true 时隐藏。

在您的控制器中：

 app.controller('customersCrtl', function ($scope, $http, $timeout) {

     $scope.loading = true; 

     $http.get('ajax/getCustomers.php').success(function(data){
         $scope.list = data;
         $scope.currentPage = 1; //current page
         $scope.entryLimit = 5; //max no of items to display in a page
         $scope.filteredItems = $scope.list.length; //Initially for no filter  
         $scope.totalItems = $scope.list.length;
         $scope.loading = false;
   });

在您看来：

 <div ng-show="loading">
      <img src="loading.gif">
 </div>

 <div ng-show="!loading">
      This content is shown when not loading!
 </div>

如何使用加载 gif 图像直到 angular js 网格加载

How to use loading gif image till angular js grid loads

html

lazy-loading

angularjs