如何在AngularJS中通过ng-repeat在指定索引添加表格行

我看到你尝试用ng-repeat渲染表格，并且想通过点击行内的添加按钮在对应索引位置插入新行，但目前的实现有问题。咱们一步步来修复：

问题诊断 #

你的addCCMSDataClick函数里用了push(index, { "val": "1" })，这是错误的用法：

• Array.push()方法是向数组末尾添加元素，它不接受索引参数；
• 另外你新增的对象只有val属性，和原有CCMSResData里的对象结构不匹配，会导致新行的输入框没有对应数据。

修复方案 #

要在指定索引位置插入元素，应该用Array.splice()方法，同时要保证新增的对象结构和原有数据一致。

1. 修正控制器中的添加函数

把你的addCCMSDataClick改成这样：

cm.addCCMSDataClick = function(index) {
  // 创建一个和原有数据结构匹配的空对象（可根据需求设置默认值）
  const newRow = {
    Id: '',
    Initiation_Date: '',
    Change_Control_Number: '',
    Manufacturing_Unit: '',
    Department: '',
    Product_Name: '',
    Change_Title: '',
    Description_Change: '',
    Owner_Name: '',
    Qa_Contact_Name: '',
    Product_Code: '',
    Progress_Status: '',
    Reportable_Category: '',
    Documents_Effected: '',
    Target_Closure_Date: '',
    Actual_Closure_Date: '',
    Change_Implementation_Date: '',
    Comments_Cross_References: ''
  };
  // splice(插入位置, 0, 要插入的元素)：0表示不删除元素，只插入
  // 用index+1是在当前行的下一行插入，若要插在当前行前，直接用index即可
  cm.CCMSResData.splice(index + 1, 0, newRow);
};

解释：

• splice方法是数组操作的核心，能精准控制插入/删除的位置和内容；
• 新对象的结构必须和CCMSResData里的元素一致，这样表格的输入框才能正确绑定对应字段。

2. 调整HTML中的点击事件

如果不需要传递productName，可以简化点击事件（如果需要用到这个参数，可保留并在新对象中赋值，比如newRow.Product_Name = productName）：

<i class="fa fa-plus" aria-hidden="true" data-toggle="tooltip" title="Add" ng-click="addCCMSDataClick($index)"></i>

3. 确认ng-repeat的track by配置

你已经用了track by $index，这在动态修改数组（插入/删除）时非常关键，能避免AngularJS的重复元素识别报错，这部分是正确的。

完整修正后关键代码片段 #

HTML部分：

<tbody>
  <tr id="rowIndex_{{$index}}" ng-repeat="ccms in CCMSResData track by $index">
    <!-- 所有列的输入框保持原有结构即可 -->
    <td>
      <i class="fa fa-plus" aria-hidden="true" data-toggle="tooltip" title="Add" ng-click="addCCMSDataClick($index)"></i>&nbsp;&nbsp;
      <i class="fa fa-trash" aria-hidden="true" data-toggle="tooltip" title="Delete"></i>
    </td>
  </tr>
</tbody>

JS部分：

cm.addCCMSDataClick = function(index) {
  const newRow = {
    Id: '',
    Initiation_Date: '',
    Change_Control_Number: '',
    Manufacturing_Unit: '',
    Department: '',
    Product_Name: '',
    Change_Title: '',
    Description_Change: '',
    Owner_Name: '',
    Qa_Contact_Name: '',
    Product_Code: '',
    Progress_Status: '',
    Reportable_Category: '',
    Documents_Effected: '',
    Target_Closure_Date: '',
    Actual_Closure_Date: '',
    Change_Implementation_Date: '',
    Comments_Cross_References: ''
  };
  cm.CCMSResData.splice(index + 1, 0, newRow);
};

额外优化提示 #

• 输入框建议改用ng-model双向绑定，比如把<input value="{{ccms.Id}}">改成<input ng-model="ccms.Id">，这样修改输入内容时能直接同步到CCMSResData数组，数据交互更顺畅；
• 删除行功能也可以用splice(index, 1)实现，逻辑和新增类似。

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