how to display a loading image in angular js

Question

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

I made an example for general $http requests using directive take a look if you like here. — Jaqen H'ghar
– Jaqen H'ghar, Commented Jun 26, 2016 at 10:53

Alexandr Rykov · Accepted Answer · 2016-06-26 10:38:43Z

1

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">

answered Jun 26, 2016 at 10:38

Alexandr Rykov

842 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to display a loading image in angular js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related