如何在AngularJS中實現數據分頁與懶加載

在 AngularJS 中實現數據分頁與懶加載可以通過以下幾個步驟來完成：

1. 安裝 AngularJS 插件 “ng-pagination” 或 “ui.bootstrap.pagination”。這些插件可以幫助你輕松地實現分頁功能。

2. 在你的 AngularJS 應用中引入所選的插件。例如，如果你選擇使用 “ng-pagination”，你需要在你的 HTML 文件中添加以下代碼：

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-pagination/2.1.2/angular-pagination.min.js"></script>

3. 在你的 AngularJS 應用模塊中添加對所選插件的依賴。例如，如果你選擇使用 “ng-pagination”，你需要在你的應用模塊定義中添加以下代碼：

angular.module('myApp', ['ngPagination']);

4. 在你的控制器中注入 $http 和 $paginate 服務。$http 服務用于從服務器獲取數據，$paginate 服務用于處理分頁邏輯。例如：

angular.module('myApp').controller('MyController', ['$scope', '$http', '$paginate', function($scope, $http, $paginate) {
  // ...
}]);

5. 使用 $http 服務從服務器獲取數據，并將其分配給 $scope 變量。例如：

$scope.items = [];
$http.get('https://api.example.com/data').then(function(response) {
  $scope.items = response.data;
});

6. 在控制器中定義一個分頁函數，該函數接受每頁顯示的項目數量作為參數。例如：

$scope.paginate = function(items, page, itemsPerPage) {
  $scope.items = items.slice((page - 1) * itemsPerPage, page * itemsPerPage);
};

7. 在 HTML 中使用 ng-repeat 指令遍歷 $scope.items，并使用 ng-paginate 指令添加分頁控件。例如：

<div ng-repeat="item in items">{{ item }}</div>
<pagination total-items="totalItems" items-per-page="itemsPerPage" ng-model="currentPage"></pagination>

8. 在控制器中定義一個變量 totalItems，用于存儲數據的總數量。你可以從服務器獲取此信息，或者在客戶端計算它。例如：

$scope.totalItems = 100; // 從服務器獲取數據的總數量，或者根據需要設置

9. 為了實現懶加載，你可以使用 $timeout 服務在滾動事件觸發時加載更多數據。首先，確保在你的控制器中注入 $timeout 服務：

angular.module('myApp').controller('MyController', ['$scope', '$http', '$paginate', '$timeout', function($scope, $http, $paginate, $timeout) {
  // ...
}]);

10. 在控制器中定義一個名為 loadMoreItems 的函數，該函數負責從服務器獲取數據并將其添加到 $scope.items 中。例如：

$scope.loadMoreItems = function() {
  $http.get('https://api.example.com/data?offset=' + $scope.items.length).then(function(response) {
    var newItems = response.data;
    $scope.items = $scope.items.concat(newItems);
    $scope.totalItems += newItems.length;
  });
};

11. 在 HTML 中添加一個滾動事件監聽器，當用戶滾動到頁面底部時觸發 loadMoreItems 函數。為了確保在數據加載完成后再更新 DOM，我們使用 $timeout 服務。例如：

<div ng-scroll="loadMoreItems()" style="height: 400px; overflow-y: auto;">
  <div ng-repeat="item in items">{{ item }}</div>
</div>

現在，當用戶滾動到頁面底部時，將自動加載更多數據并將其添加到列表中。這樣，你就可以在 AngularJS 中實現數據分頁和懶加載了。