AngularJS如何给table动态增加tr？方法有哪些？

在Web开发中,表格（Table）是展示结构化数据的重要组件，而动态增加表格行（tr）则是实现数据交互的关键功能，AngularJS作为一款经典的前端MVC框架，通过其数据绑定和指令系统，为动态操作DOM元素提供了高效且优雅的解决方案，本文将详细介绍如何使用AngularJS实现表格行的动态增加，涵盖基础实现、数据绑定、事件处理及优化技巧，帮助开发者构建灵活、可维护的数据展示界面。

基础实现：使用ng-repeat动态渲染表格行

AngularJS的核心特性之一是数据绑定,通过ng-repeat指令可以轻松实现表格行的动态渲染，假设我们有一个包含用户数据的数组，每个用户对象包含id、name和age属性，以下是最基础的实现方式：

<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>

在JavaScript控制器中,初始化用户数据数组：

angular.module('myApp', []).controller('UserController', function($scope) {
  $scope.users = [
    {id: 1, name: '张三', age: 25},
    {id: 2, name: '李四', age: 30}
  ];
});

当$scope.users数组发生变化时（如新增元素），ng-repeat会自动重新渲染表格行，无需手动操作DOM，这种声明式的方式是AngularJS的核心优势，确保了视图与数据的同步。

增加行功能：结合表单与数据模型

在实际应用中,用户通常需要通过表单输入新数据并添加到表格中，以下是一个完整的实现示例，包含输入表单和“添加”按钮：

<div ng-controller="UserController">
  <form ng-submit="addUser()">
    <input type="text" ng-model="newUser.name" placeholder="姓名" required>
    <input type="number" ng-model="newUser.age" placeholder="年龄" required>
    <button type="submit">添加用户</button>
  </form>
  <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>
</div>

在控制器中实现addUser方法：

.controller('UserController', function($scope) {
  $scope.users = [
    {id: 1, name: '张三', age: 25},
    {id: 2, name: '李四', age: 30}
  ];
  $scope.newUser = {name: '', age: ''};
  $scope.addUser = function() {
    if ($scope.newUser.name && $scope.newUser.age) {
      $scope.users.push({
        id: $scope.users.length + 1,
        name: $scope.newUser.name,
        age: $scope.newUser.age
      });
      $scope.newUser = {name: '', age: ''}; // 清空表单
    }
  };
});

关键点解析：

1. 表单提交绑定：ng-submit指令确保表单提交时调用addUser方法，并阻止默认的页面刷新行为。
2. 数据模型绑定：ng-model将输入框与$scope.newUser对象双向绑定，用户输入会实时反映到数据模型中。
3. 数组操作：通过Array.prototype.push()方法向$scope.users数组添加新对象，AngularJS会自动检测到数组变化并更新视图。

进阶优化：唯一ID生成与数据验证

在实际项目中,生成唯一ID和进行数据验证是必不可少的功能，以下是优化后的代码示例：

.controller('UserController', function($scope) {
  $scope.users = [
    {id: 1, name: '张三', age: 25},
    {id: 2, name: '李四', age: 30}
  ];
  $scope.newUser = {name: '', age: ''};
  $scope.addUser = function() {
    if (!$scope.addUserForm.$valid) return; // 表单验证
    // 生成唯一ID（简单实现，实际项目中可能需要更复杂的逻辑）
    var newId = $scope.users.length > 0 ? 
      Math.max.apply(null, $scope.users.map(u => u.id)) + 1 : 1;
    $scope.users.push({
      id: newId,
      name: $scope.newUser.name,
      age: parseInt($scope.newUser.age)
    });
    $scope.newUser = {name: '', age: ''};
    $scope.addUserForm.$setPristine(); // 重置表单状态
  };
});

对应的表单部分添加验证属性：

<form name="addUserForm" ng-submit="addUser()">
  <input type="text" name="name" ng-model="newUser.name" placeholder="姓名" required ng-minlength="2">
  <input type="number" name="age" ng-model="newUser.age" placeholder="年龄" required min="1" max="120">
  <button type="submit" ng-disabled="!addUserForm.$valid">添加用户</button>
</form>

优化说明：

1. 表单验证：通过required、ng-minlength、min等属性实现客户端验证，ng-disabled按钮在表单无效时禁用。
2. ID生成：使用Math.max和map方法确保新ID的唯一性，适用于简单场景；复杂场景可考虑使用UUID或后端生成。
3. 数据类型转换：使用parseInt将年龄转换为数字类型，避免后续计算时出现类型错误。

高级功能：删除行与批量操作

除了增加行,删除行和批量操作也是常见需求，以下是扩展功能实现：

删除单行

在表格行中添加删除按钮：

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

控制器中添加删除方法：

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

批量删除与全选

添加全选复选框和批量删除按钮：

<input type="checkbox" ng-model="selectAll" ng-change="toggleSelectAll()">
<button ng-click="deleteSelected()" ng-disabled="!hasSelected()">批量删除</button>
<tr ng-repeat="user in users">
  <td><input type="checkbox" ng-model="user.selected"></td>
  <td>{{user.id}}</td>
  <td>{{user.name}}</td>
  <td>{{user.age}}</td>
  <td><button ng-click="deleteUser(user.id)">删除</button></td>
</tr>

控制器中实现批量操作逻辑：

$scope.selectAll = false;
$scope.toggleSelectAll = function() {
  $scope.users.forEach(user => user.selected = $scope.selectAll);
};
$scope.hasSelected = function() {
  return $scope.users.some(user => user.selected);
};
$scope.deleteSelected = function() {
  $scope.users = $scope.users.filter(user => !user.selected);
  $scope.selectAll = false;
};

性能优化与最佳实践

当表格数据量较大时,需要注意性能优化，以下是几个关键建议：

1. 使用track by：在ng-repeat中添加track by user.id可以避免重复渲染，提高性能：

   <tr ng-repeat="user in users track by user.id">

2. 分页加载：对于大量数据，实现分页或虚拟滚动，避免一次性渲染所有行。

3. 避免频繁操作：批量操作时，先在内存中完成数据修改，再一次性更新$scope.users，减少视图渲染次数。

4. 使用one-time binding：对于静态数据，可使用前缀实现一次性绑定，减少观察者数量：

   <td>{{::user.id}}</td>

通过AngularJS实现表格行的动态增加,核心在于利用其数据绑定机制将视图与数据模型紧密关联，从基础的ng-repeat渲染，到结合表单的数据录入，再到删除、批量操作等高级功能，AngularJS提供了完整的解决方案，开发者在实际应用中需注意数据验证、唯一ID生成、性能优化等细节，确保代码的健壮性和可维护性，掌握这些技巧不仅能提升开发效率，还能构建出用户体验良好的数据交互界面。