在AngularJS中添加進度圈的適當方法

我正在使用AngularJS。我在我的控制器中有一個功能，它從服務器獲取.json文件，使用數據並將其存儲在$scope中。
所以基本上這個功能在頁面加載時需要最多的時間。在AngularJS中添加進度圈的適當方法

所以我有這樣的東西，我的網頁已經加載，但我的表（填充ng-repeat）沒有。加載表格需要幾秒鐘的時間。雖然表中加載我想補充進度圈這樣的：

enter image description here

什麼是適當的方式做到這一點的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; 
      }); 
     }); 
    }); 
}

來源

2014-09-30 Michael Vayvala

實際請求代碼在哪裏？ – dfsq 2014-09-30 08:38:39

在控制器：

$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

在View：

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

來源

2014-09-30 08:40:10

我的GIF進度圓形圖像在頁面加載時僅在加載時才移動。 – 2014-09-30 09:09:43

圖像顯示數據何時加載。如果你想顯示頁面加載的圖像，你也可以把'$ scope.loading = true;'$ scope.getData'函數的頂部:) – 2014-09-30 09:11:48

在您的控制器設置$scope.doneLoading = true接收和處理後的所有數據。

在您的觀點中，動畫圖片顯示爲ng-if='!doneLoading'，並隱藏其他具有類似否定條件的組件。

另外，你也可以有一個由$http.pendingRequests上的手錶控制的全局拍子 - 但不幸的是，文檔中有關於pendingRequests的說法「這主要是爲了用於調試目的」。

另外從可用性視圖中，我寧願只顯示實際上正在加載視圖的那些部分的throbber。

來源

2014-09-30 08:44:27

在AngularJS中添加進度圈的適當方法

回答

相關問題