Question

我有一个角度js表，可以在一段时间内加载。我想显示一个加载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表之前显示gif图像。请帮忙。

Answer 1

我看不到你的观点，但这就是我要做的。在控制器中将变量“loading”设置为true。然后，当http请求完成时，将加载设置为false。在你的视图中设置一个div，其中包含你的加载gif，以显示何时加载为true，并在加载为false时隐藏。将您的主要内容设置为在加载为false时显示，并在加载为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图像直到角度js网格加载

1 个答案: