CODEWITHSUNDEEP
angularjs
abhi
abhi

Reputation: 35

Display Loading Icon while loading data for specific time using angularjs

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>

Upvotes: 0

Views: 1433

Answers (1)

Petr Averyanov
Petr Averyanov

Reputation: 9476

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

Upvotes: 1

Related Questions