ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

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

2019-07-28 11:37:20  阅读:214  来源: 互联网

标签:html javascript angularjs progress


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

所以我有这样的东西,我的页面已加载,但我的表(填充ng-repeat)没有.加载表需要几秒钟.当表正在加载时,我想添加进度循环:

什么是在AngularJS中做到这一点的适当方法?

这是一个控制器演示:

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

解决方法:

在控制器中:

$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

在视图中:

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

标签:html,javascript,angularjs,progress
来源: https://codeday.me/bug/20190728/1561109.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有