如何创建动态ng-model绑定？动态模板复用旧DOM值问题排查

看起来你遇到了Angular动态新增模板时，新行携带旧DOM值的问题——我之前也踩过类似的坑，核心问题不是$index的锅，而是数据引用复用或者DOM元素复用导致的。下面给你一步步的解决方案：

问题根源分析 #

你提到用了$index但还是有问题，大概率是这两个原因：

1. 新增行时没有创建全新的空对象，而是复用了同一个对象引用，导致新行和旧行共享数据；
2. Angular的ng-repeat默认会复用DOM元素，如果没有指定track by，可能会把旧行的DOM内容直接套用到新行上，残留旧值。

具体解决方案 #

1. 修正控制器逻辑：每次新增都创建全新的空对象 #

确保新增行时，向数组中push一个独立的空对象，而不是复用同一个引用：

angular.module('yourAppName', [])
.controller('YourController', function($scope) {
  // 初始化存储行数据的数组
  $scope.rowDataList = [];

  // 新增行方法：创建全新的空对象，避免引用复用
  $scope.addNewRow = function() {
    $scope.rowDataList.push({
      // 这里可以定义模板需要的初始空属性
      input1: '',
      input2: ''
    });
  };

  // 可选：删除行方法
  $scope.removeRow = function(index) {
    $scope.rowDataList.splice(index, 1);
  };
});

2. 修正HTML模板：正确绑定ng-model并添加track by #

在ng-repeat中添加track by $index强制Angular为每个新行创建独立DOM，同时确保模板中的ng-model绑定到当前行的属性上：

<section class="main_container">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <!-- 新增按钮 -->
        <button class="btn btn-primary" ng-click="addNewRow()">新增模板行</button>
        
        <!-- 动态渲染自定义模板 -->
        <div ng-repeat="row in rowDataList track by $index">
          <ng-include src="'my-custom-row-template.html'"></ng-include>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- 自定义行模板 -->
<script type="text/ng-template" id="my-custom-row-template.html">
  <div class="row mt-2">
    <div class="col-md-6">
      <input type="text" class="form-control" ng-model="row.input1" placeholder="输入内容1">
    </div>
    <div class="col-md-5">
      <input type="text" class="form-control" ng-model="row.input2" placeholder="输入内容2">
    </div>
    <div class="col-md-1">
      <button class="btn btn-danger" ng-click="removeRow($index)">删除</button>
    </div>
  </div>
</script>

关键注意事项 #

• 绝对不要提前定义一个空对象（比如const emptyRow = {}）然后每次新增都push它，这样所有行都会引用同一个对象，修改任何一行都会同步到所有行；
• 确保模板中的ng-model是绑定到ng-repeat的当前item（比如row.input1），而不是$scope上的全局变量；
• 如果你的模板有复杂的表单控件，还可以考虑给每个行对象添加唯一ID，用track by row.id代替$index，这样更稳定（比如删除中间行后不会打乱索引关联）。

内容的提问来源于stack exchange，提问作者noobie-php