AngularJS表格详解及示例代码，如何实现动态排序与分页功能？

AngularJS 作为一款经典的前端框架，其数据双向绑定和模块化特性为表格开发提供了强大支持，通过内置的 ng-repeat 指令和丰富的过滤器，开发者可以轻松实现动态数据渲染、排序、筛选等功能，本文将详细解析 AngularJS 表格的核心功能，结合示例代码展示实际应用场景。

基础表格渲染

AngularJS 表格的核心是 ng-repeat 指令，该指令用于遍历数组或对象数据并动态生成表格行，以下是一个基础示例：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>职业</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="user in users">
      <td>{{user.name}}</td>
      <td>{{user.age}}</td>
      <td>{{user.job}}</td>
    </tr>
  </tbody>
</table>

对应的 JavaScript 代码：

angular.module('myApp', [])
  .controller('TableController', function($scope) {
    $scope.users = [
      {name: '张三', age: 28, job: '工程师'},
      {name: '李四', age: 32, job: '设计师'},
      {name: '王五', age: 24, job: '产品经理'}
    ];
  });

此示例中,ng-repeat 遍历 users 数组，为每个用户对象生成一行表格数据。 语法用于数据绑定，确保视图与模型数据同步更新。

表格排序功能

AngularJS 提供了 orderBy 过滤器，可轻松实现表格列排序，通过在 ng-repeat 中指定排序字段和排序方向，即可实现动态排序：

<table>
  <thead>
    <tr>
      <th ng-click="sortBy('name')">姓名 
        <span ng-show sortKey === 'name' 
              ng-class="reverse ? 'desc' : 'asc'"></span>
      </th>
      <th ng-click="sortBy('age')">年龄 
        <span ng-show sortKey === 'age' 
              ng-class="reverse ? 'desc' : 'asc'"></span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="user in users | orderBy:sortKey:reverse">
      <td>{{user.name}}</td>
      <td>{{user.age}}</td>
    </tr>
  </tbody>
</table>

控制器代码需添加排序逻辑：

$scope.sortKey = 'name';
$scope.reverse = false;
$scope.sortBy = function(key) {
  $scope.reverse = ($scope.sortKey === key) ? !$scope.reverse : false;
  $scope.sortKey = key;
};

点击表头时,sortBy 方法会切换排序字段和方向，orderBy 过滤器根据参数动态渲染排序结果。

表格筛选功能

结合 filter 过滤器，可实现基于用户输入的实时筛选，以下示例展示如何通过搜索框过滤表格数据：

<input type="text" ng-model="searchText" placeholder="搜索...">
<table>
  <tbody>
    <tr ng-repeat="user in users | filter:searchText">
      <td>{{user.name}}</td>
      <td>{{user.age}}</td>
    </tr>
  </tbody>
</table>

filter 过滤器会根据 searchText 的值实时匹配 users 数组中的对象，仅显示符合条件的数据，默认情况下，过滤器会对所有属性进行模糊匹配，可通过指定属性名实现精确筛选，如 filter:{name:searchText}。

分页功能实现

对于大数据集,分页是必要的优化手段，以下实现包含分页控制器和分页按钮：

<div>
  <table>
    <tbody>
      <tr ng-repeat="user in users | limitTo:itemsPerPage:currentPage*itemsPerPage">
        <td>{{user.name}}</td>
        <td>{{user.age}}</td>
      </tr>
    </tbody>
  </table>
  <div class="pagination">
    <button ng-disabled="currentPage === 0" 
            ng-click="currentPage = currentPage - 1">上一页</button>
    <span>第 {{currentPage + 1}} 页</span>
    <button ng-disabled="currentPage >= users.length/itemsPerPage - 1" 
            ng-click="currentPage = currentPage + 1">下一页</button>
  </div>
</div>

控制器代码：

$scope.currentPage = 0;
$scope.itemsPerPage = 5;

limitTo 过滤器通过计算 currentPage 和 itemsPerPage 实现数据分片，分页按钮通过修改 currentPage 控制显示的数据范围。

表格样式与交互

结合 CSS 框架（如 Bootstrap）可快速美化表格，AngularJS 的 ng-class 指令还能实现动态样式绑定：

<table class="table table-striped">
  <tr ng-repeat="user in users" 
      ng-class="{'highlight': user.age > 30}">
    <td>{{user.name}}</td>
    <td>{{user.age}}</td>
  </tr>
</table>

通过 ng-class 动态添加 highlight 类，可为年龄大于 30 的行设置特殊样式。ng-mouseenter 和 ng-click 等指令可实现行悬停效果和点击事件，增强用户交互体验。

复杂表格示例

以下综合示例展示包含排序、筛选、分页和样式的完整表格：

<div ng-app="myApp" ng-controller="TableController">
  <input type="text" ng-model="searchText" placeholder="搜索...">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th ng-click="sortBy('name')">姓名 
          <span ng-show="sortKey === 'name'" 
                ng-class="reverse ? 'glyphicon glyphicon-chevron-down' : 'glyphicon glyphicon-chevron-up'"></span>
        </th>
        <th ng-click="sortBy('age')">年龄 
          <span ng-show="sortKey === 'age'" 
                ng-class="reverse ? 'glyphicon glyphicon-chevron-down' : 'glyphicon glyphicon-chevron-up'"></span>
        </th>
        <th ng-click="sortBy('job')">职业</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="user in filteredUsers = (users | filter:searchText | orderBy:sortKey:reverse) 
                    | limitTo:itemsPerPage:currentPage*itemsPerPage">
        <td>{{user.name}}</td>
        <td>{{user.age}}</td>
        <td>{{user.job}}</td>
      </tr>
    </tbody>
  </table>
  <div class="pagination">
    <button ng-disabled="currentPage === 0" 
            ng-click="currentPage = currentPage - 1">上一页</button>
    <span>共 {{filteredUsers.length}} 条记录</span>
    <button ng-disabled="currentPage >= filteredUsers.length/itemsPerPage - 1" 
            ng-click="currentPage = currentPage + 1">下一页</button>
  </div>
</div>

对应的控制器需包含所有逻辑：

angular.module('myApp', [])
  .controller('TableController', function($scope) {
    $scope.users = [
      {name: '张三', age: 28, job: '工程师'},
      {name: '李四', age: 32, job: '设计师'},
      {name: '王五', age: 24, job: '产品经理'},
      {name: '赵六', age: 35, job: '经理'},
      {name: '钱七', age: 29, job: '开发'}
    ];
    $scope.sortKey = 'name';
    $scope.reverse = false;
    $scope.currentPage = 0;
    $scope.itemsPerPage = 3;
    $scope.sortBy = function(key) {
      $scope.reverse = ($scope.sortKey === key) ? !$scope.reverse : false;
      $scope.sortKey = key;
    };
  });

此示例中,filteredUsers 变量存储筛选和排序后的结果，分页逻辑基于过滤后的数据计算，确保分页准确性，通过合理组合 AngularJS 指令和过滤器，可构建功能完善、性能良好的动态表格。