javascript - Appropriate way to add progress circle in AngularJS - Stack Overflow

admin管理员组

文章数量:1356438

I am using AngularJS. I have a function in my controller that gets .json file from the server, working with data and store it in $scope.
So basically this function needs biggest amount of time when the page is loading.

So I have something like this, my page has loaded but but my table (that populates with ng-repeat) has not. It takes few seconds to load the table. And while the table is loading I want to add progress circle like that:

What is appropriate way to do it in AngularJS?

Here is a controller demo:

 var serverData = $http.get('data/topCarObj.json');
 function sortCars(){
    angular.forEach($scope.tabArray, function(tab){
        serverData.success(function(data){
            angular.forEach(data, function(key){
                ....
                return myCarList;
            });
        });
     });
}

I am using AngularJS. I have a function in my controller that gets .json file from the server, working with data and store it in $scope.
So basically this function needs biggest amount of time when the page is loading.

So I have something like this, my page has loaded but but my table (that populates with ng-repeat) has not. It takes few seconds to load the table. And while the table is loading I want to add progress circle like that:

What is appropriate way to do it in AngularJS?

Here is a controller demo:

 var serverData = $http.get('data/topCarObj.json');
 function sortCars(){
    angular.forEach($scope.tabArray, function(tab){
        serverData.success(function(data){
            angular.forEach(data, function(key){
                ....
                return myCarList;
            });
        });
     });
}

• javascript
• html
• angularjs
• progress

Share Improve this question Follow edited Sep 30, 2014 at 8:42 Michael asked Sep 30, 2014 at 8:35 MichaelMichael 16.2k3939 gold badges9898 silver badges145145 bronze badges 1

• Where is actual request code? – dfsq Commented Sep 30, 2014 at 8:38

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

In Controller:

$scope.getData = function() {    // wrap a data getting code in a function
        $scope.loading = true;     // define a variable that indicate the loading status   // true here
        $http.get('path_to_json').success(function (data) {   // get the data 
            $scope.loading = false;     // loading is finished so loading = false
        })
        .error(function (data, status) {
             $scope.loading = false;    // loading = false when there is a error
        });
}

$scope.getData();         // call the function to get data

In View:

<img src="loading.gif" ng-show="loading" /> // show the loading.gif when `$scope.loading` variable is `true`

In your controller set $scope.doneLoading = true after all data is received and processed.

In your view have the animated image show with ng-if='!doneLoading' and hide other ponents with a similar, negated condition.

Alternatively you could also have a global throbber that is controlled by a watch on $http.pendingRequests - but unfortunately the docs say about pendingRequests that "This is primarily meant to be used for debugging purposes."

Also from a usability view I would prefer showing a throbber only at those parts of the view that are actually currently loading.

本文标签： javascriptAppropriate way to add progress circle in AngularJSStack Overflow