Question

我使用angularJS进行简单的HTTP get调用

  $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;

当您进行服务器调用时，将此值设为true，如

$scope.loading = true;

在您的结果出现后，请转到$scope.loading = false;

并在HTML中使用

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

因此，只要加载为true，此标记就会显示。

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>

OR

使用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调用完成后隐藏加载微调器？

2 个答案: