AngularJS表格基础知识笔记，如何实现动态排序与分页？

AngularJS 作为一款经典的前端 JavaScript 框架，其核心特性之一就是通过数据绑定简化动态页面的开发，在处理数据展示时，表格是常用的组件，AngularJS 提供了强大的指令来动态渲染和操作表格数据，下面将详细介绍 AngularJS 中表格相关的核心知识点。

基础表格渲染：ng-repeat 指令

在 AngularJS 中，ng-repeat 是最基础的数据循环指令，可用于动态生成表格行，假设有一个包含用户数据的数组 $scope.users，可通过以下方式渲染表格：

<table border="1"> <thead> <tr> <th>ID</th> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr ng-repeat="user in users"> <td>{{user.id}}</td> <td>{{user.name}}</td> <td>{{user.age}}</td> </tr> </tbody> </table>

关键点：

• ng-repeat="user in users" 会遍历 $scope.users 数组，为每个元素创建一个 <tr> 元素。
• 使用 {{user.property}} 绑定数据到单元格，AngularJS 会自动更新视图。

表格排序功能

实现动态排序需要结合 ng-repeat 的 orderBy 过滤器，并通过变量控制排序字段和顺序。

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

控制器逻辑：

$scope.sortKey = 'id'; // 默认排序字段 $scope.reverse = false; // 默认升序 $scope.sortBy = function(key) { if ($scope.sortKey === key) { $scope.reverse = !$scope.reverse; // 切换排序顺序 } else { $scope.sortKey = key; $scope.reverse = false; } };

关键点：

• orderBy:sortKey:reverse 中，sortKey 为排序字段，reverse 为布尔值（true 降序，false 升序）。
• 点击表头时调用 sortBy 方法，动态更新 sortKey 和 reverse 实现排序。

表格过滤与搜索

通过 filter 过滤器可实现表格数据的实时搜索，通常结合输入框的 ng-model 指令。

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

关键点：

• filter:searchText 会根据输入框的值过滤 $scope.users 数组，支持模糊匹配。
• 若需指定过滤字段（如仅搜索姓名），可改为 filter:{name:searchText}。

表格分页功能

分页需要手动计算当前页的数据范围，结合 limitTo 和 number 过滤器实现。

<div> 每页显示: <select ng-model="pageSize"> <option value="5">5</option> <option value="10">10</option> </select> </div> <table> <tbody> <tr ng-repeat="user in users | limitTo:pageSize: (currentPage-1)*pageSize"> <td>{{user.name}}</td> <td>{{user.age}}</td> </tr> </tbody> </table> <div> <button ng-disabled="currentPage === 1" ng-click="currentPage--">上一页</button> <span>第 {{currentPage}} 页 / 共 {{Math.ceil(users.length/pageSize)}} 页</span> <button ng-disabled="currentPage >= Math.ceil(users.length/pageSize)" ng-click="currentPage++">下一页</button> </div>

控制器逻辑：

$scope.currentPage = 1; // 当前页码 $scope.pageSize = 5; // 每页条数

关键点：

• limitTo:pageSize: (currentPage-1)*pageSize 中，第一个参数为每页条数，第二个参数为起始索引。
• 通过 currentPage 和 pageSize 计算总页数，并控制分页按钮的禁用状态。

表格样式与条件渲染

结合 ng-class 和 ng-if 可实现动态样式和条件渲染，为年龄超过 30 的行添加高亮样式：

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

CSS 样式：

.highlight { background-color: #ffeb3b; }

关键点：

• ng-class 支持对象语法，键为 CSS 类名，值为布尔表达式，条件为 true 时添加类名。
• ng-if 可用于根据条件渲染整个行或单元格（如 ng-if="user.age >= 18" 显示成年标识）。

表格数据操作

可通过按钮实现数据的增删改，例如添加新用户：

<input type="text" ng-model="newUser.name" placeholder="姓名"> <input type="number" ng-model="newUser.age" placeholder="年龄"> <button ng-click="addUser()">添加</button> <tr ng-repeat="user in users"> <td>{{user.name}}</td> <td>{{user.age}}</td> <td><button ng-click="deleteUser($index)">删除</button></td> </tr>

控制器逻辑：

$scope.newUser = {}; $scope.addUser = function() { $scope.users.push(angular.copy($scope.newUser)); $scope.newUser = {}; // 清空输入 }; $scope.deleteUser = function(index) { $scope.users.splice(index, 1); };

关键点：

• 使用 angular.copy() 避免引用类型数据导致的问题。
• 删除时通过 $index 获取当前行的索引，splice() 方法移除数组元素。

AngularJS 通过 ng-repeat、过滤器（orderBy、filter、limitTo）和指令（ng-class、ng-model、ng-click）等特性，实现了表格的动态渲染、排序、搜索、分页及数据操作，掌握这些基础知识点，能够高效构建功能完善的表格组件，为复杂的数据展示场景打下坚实基础，在实际开发中，还需结合性能优化（如大数据量时使用分页）和用户体验设计（如加载状态提示）,进一步提升表格的实用性和交互性。