AngularJS表格基本操作示例，如何实现增删改查与数据绑定？

AngularJS中table表格基本操作示例

AngularJS作为一款流行的前端JavaScript框架，通过数据绑定和指令简化了动态网页的开发，表格（table）是展示结构化数据的核心组件，本文将详细介绍AngularJS中表格的基本操作，包括数据绑定、排序、筛选、分页等功能，并通过代码示例帮助读者快速上手。

数据绑定与表格渲染

在AngularJS中，表格的数据通常通过ng-repeat指令动态渲染，假设我们有一个包含用户信息的数组，可以通过以下方式将其绑定到表格中：

<div ng-app="myApp" ng-controller="UserController"> <table border="1"> <thead> <tr> <th>ID</th> <th>姓名</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> <td>{{user.email}}</td> </tr> </tbody> </table> </div>

对应的JavaScript控制器代码如下：

var app = angular.module('myApp', []); app.controller('UserController', function($scope) { $scope.users = [ {id: 1, name: '张三', age: 25, email: 'zhangsan@example.com'}, {id: 2, name: '李四', age: 30, email: 'lisi@example.com'}, {id: 3, name: '王五', age: 28, email: 'wangwu@example.com'} ]; });

通过ng-repeat指令，users数组中的每个元素都会生成一行表格数据，实现动态渲染。

表格排序功能

排序是表格的常见需求，AngularJS可以通过orderBy过滤器实现，点击表头时对年龄列进行升序或降序排序：

<table border="1"> <thead> <tr> <th>ID</th> <th>姓名</th> <th ng-click="sortColumn='age'; reverse=!reverse"> 年龄 <span ng-show="sortColumn==='age'">{{reverse ? '↑' : '↓'}}</span> </th> <th>邮箱</th> </tr> </thead> <tbody> <tr ng-repeat="user in users | orderBy:sortColumn:reverse"> <td>{{user.id}}</td> <td>{{user.name}}</td> <td>{{user.age}}</td> <td>{{user.email}}</td> </tr> </tbody> </table>

控制器中需初始化排序变量：

$scope.sortColumn = 'age'; $scope.reverse = false;

点击“年龄”列时，reverse值取反，实现升序/降序切换。

表格筛选功能

结合filter过滤器，可以根据用户输入动态筛选表格数据，添加一个搜索框按姓名筛选：

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

searchText绑定到输入框的ng-model，filter过滤器会实时匹配包含该文本的行。

表格分页功能

当数据量较大时，分页是必要的优化，以下是一个简单的分页实现：

<div ng-app="myApp" ng-controller="UserController"> <table border="1"> <thead> <tr> <th>ID</th> <th>姓名</th> <th>年龄</th> <th>邮箱</th> </tr> </thead> <tbody> <tr ng-repeat="user in users | limitTo: pageSize | startFrom: currentPage * pageSize"> <td>{{user.id}}</td> <td>{{user.name}}</td> <td>{{user.age}}</td> <td>{{user.email}}</td> </tr> </tbody> </table> <div> <button ng-disabled="currentPage === 0" ng-click="currentPage--">上一页</button> <span>第 {{currentPage + 1}} 页</span> <button ng-disabled="currentPage >= totalPages - 1" ng-click="currentPage++">下一页</button> </div> </div>

控制器中需计算总页数并初始化分页变量：

$scope.currentPage = 0; $scope.pageSize = 5; $scope.totalPages = Math.ceil($scope.users.length / $scope.pageSize); // 自定义startFrom过滤器 app.filter('startFrom', function() { return function(input, start) { start = +start; return input.slice(start); }; });

表格行操作与事件处理

表格中常需实现行编辑或删除操作，添加删除按钮并绑定事件：

<tr ng-repeat="user in users"> <td>{{user.id}}</td> <td>{{user.name}}</td> <td>{{user.age}}</td> <td>{{user.email}}</td> <td> <button ng-click="deleteUser(user.id)">删除</button> </td> </tr>

控制器中实现删除方法：

$scope.deleteUser = function(id) { $scope.users = $scope.users.filter(function(user) { return user.id !== id; }); };

表格样式优化

结合CSS可提升表格美观度。

table { width: 100%; border-collapse: collapse; margin: 20px 0; } th, td { padding: 10px; border: 1px solid #ddd; text-align: left; } th { background-color: #f2f2f2; cursor: pointer; } tr:hover { background-color: #f5f5f5; }

完整示例总结

以下是一个包含上述功能的完整示例表格：

通过以上方法，可以快速构建功能完善的AngularJS表格，实际开发中，还可结合第三方库（如ui-grid）进一步扩展功能，如列拖拽、单元格编辑等，掌握这些基础操作后,读者可根据项目需求灵活调整和优化表格实现。