AngularJS - 在等待数据/数据计算时加载图标 [英] AngularJS - Loading icon whilst waiting for data/data calculation

问题描述

我有一个简单的 Angular http.get:

app.factory('countriesService', function($http) {返回 {getCountryData:函数(完成){$http.get('/resources/json/countries.json').成功(功能(数据){完成(数据)；}).错误(功能(错误){alert('发生错误');});}}});

示例 .JSON:

<代码>{NoCities":66，余额":2103，人口":63705000，城市信息":[{"CityName": "伦敦","城市人口": "7825200",事实":{"SubFact1": "xzy","SubFact2": "xzy","SubFact3": "xzy","SubFact4": "xzy","SubFact5": "xzy"},},{"CityName": "曼彻斯特","城市人口": "2584241",事实":{"SubFact1": "abc","SubFact2": "abc","SubFact3": "abc","SubFact4": "abc"},}],提交信息":空，FormAction":空，表单控制器":空，}

我注意到当我的页面执行 .length 时，有时加载数据可能需要一段时间，例如:

<a>国家</a>:{{Countries.length}}

Angular 是否有某种形式的等待/加载图标，我可以在填充 DIV 中的数据时显示该图标?

理想情况下是轻量级的，不需要加载库(我的应用程序也在使用 jQuery)

谢谢

解决方案

这是我通常的做法.在 OZ_ 看来，这需要 Font Awesome. 的类 fa fa-spinner fa-spin 是对该库的引用.

不过，您也可以选择显示/隐藏指示加载的 .gif.

标记

使用 ng-hide 和 ng-show 控制将包含填充数据的微调器和元素的可见性.

<i class="fa fa-spinner fa-spin"></i></p><div ng-show="dataLoaded"><a>国家</a>:{{Countries.length}}

JS

在您调用之前，将 $scope.dataLoaded 设置为 false.然后，在您的 success 块中，将其设置为 true.另外值得注意的是，您需要将 $scope 传递给您的工厂.

app.factory('countriesService', function($http, $scope) {返回 {getCountryData:函数(完成){$scope.dataLoaded = false;$http.get('/resources/json/countries.json').成功(功能(数据){完成(数据)；$scope.dataLoaded = true;}).错误(功能(错误){alert('发生错误');});}}});

I have a simple Angular http.get:

app.factory('countriesService', function($http) {
return {
    getCountryData: function(done) {
        $http.get('/resources/json/countries.json')
        .success(function(data) { done(data);})
        .error(function(error) {
            alert('An error occured');
        });
    }
}
});

Example .JSON:

{
"NoCities": 66,
"Balance": 2103,
"Population":  63705000,
"CityInfo": [
    {
        "CityName": "London",
        "CityPopulation": "7825200",
        "Facts": {
            "SubFact1": "xzy",
            "SubFact2": "xzy",
            "SubFact3": "xzy",
            "SubFact4": "xzy",
            "SubFact5": "xzy"
        },
    },
    {
        "CityName": "Manchester",
        "CityPopulation": "2584241",
        "Facts": {
            "SubFact1": "abc",
            "SubFact2": "abc",
            "SubFact3": "abc",
            "SubFact4": "abc"
        },
    }

],
"SubmitInfo": null,
"FormAction": null,
"FormController": null,
}

I've noticed when my page is performing a .length, sometimes it can take a while for the data to load, for example:

<div>
    <a>Countries</a> : {{Countries.length}}
</div>

Does Angular have some form of waiting/loading icon that i could show whilst the data in the DIV is being populated?

Ideally something lightweight and that doesnt require a library to be loaded (my application is using jQuery too)

Thanks

解决方案

This is my usual approach. To OZ_'s point, this requires Font Awesome. The <i>'s classes fa fa-spinner fa-spin are a reference to that library.

Although, you could also opt to show/hide a .gif that indicates loading.

Markup

Using ng-hide and ng-show to control visibility of the spinner and element that will contain your populated data.

<p class="text-center" ng-hide="dataLoaded">
    <i class="fa fa-spinner fa-spin"></i>
</p>
<div ng-show="dataLoaded">
    <a>Countries</a> : {{Countries.length}}
</div>

JS

Before your call, set $scope.dataLoaded to false. Then, within your success block, set it to true. Also worth noting you'll need to pass $scope to your factory.

app.factory('countriesService', function($http, $scope) {
    return {
        getCountryData: function(done) {
            $scope.dataLoaded = false;
            $http.get('/resources/json/countries.json')
            .success(function(data) { 
                done(data); 
                $scope.dataLoaded = true;
             })
            .error(function(error) {
                alert('An error occured');
            });
        }
    }
});

这篇关于AngularJS - 在等待数据/数据计算时加载图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！