在AngularJS中添加进度圈的适当方法

在AngularJS中添加进度圈的适当方法

本文介绍了在AngularJS中添加进度圈的适当方法的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用AngularJS。我在控制器中有一个函数,它从服务器获取 .json 文件,处理数据并将其存储在 $ scope
所以基本上这个函数在页面加载时需要最多的时间。



所以我有这样的东西,我的页面已经加载但是我的表(用 ng-repeat 填充)没有。加载表格需要几秒钟的时间。在表格加载过程中,我想添加如下进度圈:

在AngularJS中做什么适当的方法?

以下是一个控制器演示:

  var serverData = $ http.get('data / topCarObj。 JSON'); 
函数sortCars(){
angular.forEach($ scope.tabArray,function(tab){
serverData.success(function(data){
angular.forEach(data,函数(键){
....
返回myCarList;
});
});
});


解决方案

>

  $ scope.getData = function(){//在函数中包装获取数据的数据
$ scope.loading = true ; //定义一个指示加载状态的变量// true在这里
$ http.get('path_to_json')。success(function(data){//获取数据
$ scope.loading = false ; //加载完成后,加载= false
})
.error(function(data,status){
$ scope.loading = false; // loading = false when there错误
});
}

$ scope.getData(); //调用函数获取数据

在视图中:

 < img src =loading.gifng-show =loading/> //当`$ scope.loading`变量为`true`时显示loading.gif 


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;
            });
        });
     });
}
解决方案

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`

这篇关于在AngularJS中添加进度圈的适当方法的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-02 03:52