如何在AngularJS中實現分頁功能

在AngularJS中實現分頁功能，你可以使用ng-pagination這個第三方庫，或者自己編寫代碼來實現。這里我將介紹如何使用ng-pagination庫來實現分頁功能。

1. 首先，你需要在你的項目中引入ng-pagination庫。你可以通過以下方式引入：

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

2. 在你的HTML文件中，使用ng-pagination指令：

<div ng-app="myApp" ng-controller="myCtrl">
  <pagination total-items="totalItems" ng-model="currentPage" items-per-page="itemsPerPage" max-size="maxSize" boundary-links="true" rotate="false">
    <span class="step-links">
      <span ng-repeat="page in pages track by $index">
        <a href="" ng-class="{active: ($index === currentPage)}">{{page}}</a>
      </span>
    </span>
  </pagination>
  <div class="data">
    <ul>
      <li ng-repeat="item in items">{{item}}</li>
    </ul>
  </div>
</div>

在這個例子中，我們定義了一個pagination元素，它包含了以下屬性：

• total-items：數據的總數量。
• ng-model：當前頁碼。
• items-per-page：每頁顯示的數據條數。
• max-size：最大分頁數。
• boundary-links：是否顯示邊界鏈接。
• rotate：是否旋轉數字。

3. 在你的AngularJS應用中，定義一個控制器，并設置相關數據：

var app = angular.module('myApp', ['ngPagination']);
app.controller('myCtrl', function($scope) {
  // 示例數據
  $scope.items = [
    'Item 1',
    'Item 2',
    'Item 3',
    'Item 4',
    'Item 5',
    'Item 6',
    'Item 7',
    'Item 8',
    'Item 9',
    'Item 10'
  ];

  // 數據總數量
  $scope.totalItems = $scope.items.length;

  // 每頁顯示的數據條數
  $scope.itemsPerPage = 5;

  // 最大分頁數
  $scope.maxSize = 5;
});

現在，你應該可以在你的AngularJS應用中看到分頁功能了。你可以根據需要調整items-per-page、max-size等屬性的值來改變分頁的行為。如果你想使用自定義的分頁邏輯，而不是使用ng-pagination庫，你可以監聽$locationChangeStart事件，并在控制器中處理分頁邏輯。