nackolysis nackolysis - 1 year ago 143
Javascript Question

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


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

$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

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download