Angular JS实现HTML表格行的动态添加与移除问题

嘿，我之前在AngularJS里做动态表格行的时候也踩过一模一样的坑！你的这几个问题本质上都是引用类型数据的浅拷贝/复用引用导致的，AngularJS的双向绑定是跟着对象引用走的，只要对象引用没换，绑定的数据就会串在一起。

问题根源拆解 #

• 删除最后一行后新增行带旧数据：你大概率是把删除的行对象存了起来，新增时直接把这个旧对象又推回数组了——它的引用没变，里面的数据自然还是之前的。
• 删除倒数第二行后新增行带原最后一行数据：如果你的新增逻辑是“复制最后一行的对象”，那复制的是引用，不是新对象，新增的行和原最后一行其实是同一个对象，数据当然会重复。
• 编辑时倒数第二和最后一行同步变更：这更直接了——这两行对应的是同一个对象引用，改一个等于改所有指向它的变量。

解决办法：确保每一行都是独立的新对象 #

核心原则就是：新增行时必须创建一个全新的对象，绝不复用已有行的引用。

给你一个能解决所有问题的示例代码：

控制器代码

angular.module('dynamicTableApp', [])
.controller('TableController', function($scope) {
  // 初始化第一行，用独立的空对象
  $scope.tableRows = [{
    name: '',
    email: '',
    phone: ''
  }];

  // 新增行：每次都创建一个全新的空对象
  $scope.addNewRow = function() {
    $scope.tableRows.push({
      name: '',
      email: '',
      phone: ''
    });
  };

  // 删除行：用splice没问题，但别保留对删除行的引用
  $scope.deleteRow = function(rowIndex) {
    // 直接删除，不要把删除的行存到某个全局变量里复用
    $scope.tableRows.splice(rowIndex, 1);
  };
});

HTML模板

<div ng-app="dynamicTableApp" ng-controller="TableController">
  <table border="1">
    <thead>
      <tr>
        <th>姓名</th>
        <th>邮箱</th>
        <th>电话</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="row in tableRows track by $index">
        <td><input type="text" ng-model="row.name"></td>
        <td><input type="email" ng-model="row.email"></td>
        <td><input type="tel" ng-model="row.phone"></td>
        <td><button ng-click="deleteRow($index)">删除</button></td>
      </tr>
    </tbody>
  </table>
  <button ng-click="addNewRow()">新增一行</button>
</div>

关键注意点 #

• 如果一定要基于某个模板行创建新行，必须用angular.copy(templateRow)来做深拷贝，而不是直接赋值。
• 不要把删除的行对象存在全局变量里等着复用，要彻底让它被垃圾回收。
• 即使使用了track by $index，也要确保行对象都是独立的，不然引用没变还是会出问题。

这样改完之后，你说的三个异常应该就都消失了，每一行的数据都是独立的，新增和删除都不会串数据~

内容的提问来源于stack exchange，提问作者Lahaul Seth