CODEWITHSUNDEEP
htmlangularjslazy-loading
rohit nair
rohit nair

Reputation: 240

How to use loading gif image till angular js grid loads

I have an angular js table which loads in some time. I want to display a loading gif image till the time it loads. I have seen multiple examples but not able to figure it out as I am new to angular JS.

app.js code

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;
};
});

How can I display the gif image only till the ng-repeat table loads on the screen. Please help.

Upvotes: 0

Views: 601

Answers (1)

mediaguru
mediaguru

Reputation: 1917

I can't see your view but here's what I would do. Set a variable "loading" to true in your controller. Then when http request is complete, set loading to false. In your view set a div with your loading gif in it to show when loading is true, and hide when loading is false. Set your main content to show when loading is false and hidden when loading is true.

In your controller:

 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;
   });

And in your view: 

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

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

Upvotes: 1

Related Questions