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）进一步扩展功能，如列拖拽、单元格编辑等，掌握这些基础操作后,读者可根据项目需求灵活调整和优化表格实现。