Display Loading Icon while loading data for specific time using angularjs

Question

I am trying to load Image icon(set time to load particular for 30 Second) while loading the data from the database but I am facing some problem as I want to set timer also for Loading Icon (i.e Loading Icon appear for 30 second) using angularjs. How I achieve this functionality as I was done this by ng-show and ng-hide but I am unable to attach time in Icon. my Code is

     editApp.controller('MyCtrl', ['$scope', '$http', 'ngDialog','$timeout' ,function ($scope,$http, ngDialog, $timeout) {
             GetList();
             $scope.dataloaded = false;

and after ajax call I set $scope.dataloaded to true

    function GetList() {
                 debugger;

                 $http({
                     method: 'GET',
                     url: '/Home/GetProductList'
                 }).
                 success(function (data) {

                     if (data != null || data != 'undefined') {
                         $scope.productlist = data;
                         $scope.dataloaded = true;
                     }
                 })
                 .error(function (error) {
                     $scope.status = 'Unable to retrieve product' + error.message;
                 });


             }

and my html code is

<div ng-hide="dataloaded" style="margin:auto" align="center"> </div>

and

<div ng-show="dataloaded" style="margin:auto" align="center"> </div>

Petr Averyanov · Accepted Answer · 2014-12-30 14:53:28Z

1

Lets show div for 30 sec:

<button ng-click='show()'>Show</button>
<div ng-show='showDiv'/>

In controller:

$scope.show = function() {
    $scope.showDiv = true;
    $timeout(function() {
        $scope.showDiv = false;
    }, 30000);
}

answered Dec 30, 2014 at 14:53

Petr Averyanov

9,5963 gold badges25 silver badges41 bronze badges

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

Collectives™ on Stack Overflow

Display Loading Icon while loading data for specific time using angularjs

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