CODEWITHSUNDEEP
javascriptangularjs
nackolysis
nackolysis

Reputation: 217

how to display a loading image in angular js

Hello great Stackoverflow, am learning angular js and so am querying database records via angular js and everything works fine. now i want to display a loading image as the database content is loading and the image will fade off as soon as the content is loaded. please how do i achieve that. Thanks

below is the working code

var app = angular.module('angularTable', ['angularUtils.directives.dirPagination']);

app.controller('listdata',function($scope, $http){
    $scope.users = []; //declare an empty array

    $http.get("data.php").success(function(response){ 

        $scope.users = response;  //ajax request to fetch data into $scope.data
    });

    $scope.sort = function(keyname){
        $scope.sortKey = keyname;   //set the sortKey to the param passed
        $scope.reverse = !$scope.reverse; //if true make it false and vice versa
    }
});

Upvotes: 1

Views: 78

Answers (1)

Alexandr Rykov
Alexandr Rykov

Reputation: 84

You can add smth like $scope.loading = true; before $http.get("data.php").success(function(response){ line. And $scope.loading = false; inside success function. In markup, smth like <table ng-hide="loading"> and <img ng-show="loading" src="loader.gif">

Upvotes: 1

Related Questions