HTTP 调用完成后如何隐藏加载微调器？

Question

我有一个简单的 HTTP get 调用 angularJS

  $http({
        method: 'GET',
        url: 'Dashboard/GetDashboard'
    }).then(function successCallback(response) {
        $scope.dashboard = response.data;           
    }, function errorCallback(response) {
        console.log(response);
    });

有时在加载仪表板时性能非常低，我想使用 font-awesome 的加载微调器。这是我在索引上的 HTML 代码。

<i ng-hide="?" class="fa fa-refresh icon-options"></i>

我知道我必须为此使用 ng-hide 但我不知道我必须使用什么表达式。

HTTP 调用完成后，我想隐藏加载微调器。

有人能指出我正确的方向吗？

亲切的问候

Answer 1

所以这是分配范围变量的解决方案

$scope.loading = false;

当你进行服务器调用时，使这个值像

一样为真

$scope.loading = true;

在你的结果出来之后$scope.loading = false;

并在 HTML 中使用

<i ng-if="loading" class="fa fa-refresh icon-options"></i>

因此只要加载为真，此标签就会可见。

Answer 2

使用一些布尔变量并将其放在您的调用之前，并在成功后将其设置为 true，如下所示：使用 ng-hide

    $scope.isSpinnerHidden = false;
    $http({
            method: 'GET',
            url: 'Dashboard/GetDashboard'
        }).then(function successCallback(response) {
            $scope.dashboard = response.data;  
            $scope.isSpinnerHidden = true;
        }, function errorCallback(response) {
            console.log(response);
        }); 

<i ng-hide="isSpinnerHidden" class="fa fa-refresh icon-options"></i>

或

像下面那样使用 ng-show

$scope.isSpinnerHidden = true;
    $http({
            method: 'GET',
            url: 'Dashboard/GetDashboard'
        }).then(function successCallback(response) {
            $scope.dashboard = response.data;  
            $scope.isSpinnerHidden = false;
        }, function errorCallback(response) {
            console.log(response);
        }); 

<i ng-show="isSpinnerHidden" class="fa fa-refresh icon-options"></i>

希望对您有所帮助！！

HTTP 调用完成后如何隐藏加载微调器？

How can I hide the loading spinner when the HTTP call is finished?

html

http

loading

angularjs