AngularJS动态添加表格行文本值无法获取，转PDF仅首行数据正常怎么办？

核心问题原因 #

1. 你通过jQuery动态插入的DOM元素虽然写了ng-model属性，但没有经过AngularJS的编译流程，Angular无法识别这些动态绑定，自然无法读取对应数据。
2. 删除按钮异常是因为闭包捕获变量的问题：绑定删除事件时所有回调都共享同一个newRowID变量引用，点击时已经是最后一行的ID，同时没有同步删除Angular作用域中对应的数据。

方案1：最小改动修复现有代码 #

适合不想重构现有逻辑的场景：

1. 先在你的Angular控制器中暴露$compile和$scope，用于手动编译DOM：

// Angular控制器代码中添加
window.ngScope = $scope;
window.ngCompile = $compile;

2. 修改jQuery的addRow方法，新增行后执行编译：

$myTable.append($newRow);
// 新增两行代码
ngCompile($newRow)(ngScope);
ngScope.$apply();

3. 修复删除按钮逻辑，改用事件委托避免闭包问题：
   删除addRow中给删除按钮绑定事件的代码，在$(document).ready中统一添加事件委托：

$(document).on('click', '.removeRegular', function() {
  const rowId = $(this).attr('id').replace('removeRegular', '');
  $('#regFacEmpType' + rowId).remove();
  // 同步删除Angular作用域中的对应数据
  delete ngScope.data[`RegEmpAgencyBudgt${rowId}`];
  delete ngScope.data[`RegEmpRowBdgt${rowId}`];
  delete ngScope.data[`AdjustedBudgetRegularEmpType${rowId}`];
  delete ngScope.data[`RegEmpComments${rowId}`];
  ngScope.$apply();
});

方案2：符合Angular规范的推荐写法 #

完全抛弃jQuery手动操作DOM的逻辑，用Angular的数据驱动方式实现，从根源避免绑定问题：

1. 在Angular控制器中定义行数据数组和操作方法：

// 初始化第一行数据
$scope.tableRows = [{
  agencyBudgeted: '',
  piBudgetedAmount: '',
  piAdjustedBudget: '',
  comments: ''
}];

// 新增行
$scope.addRow = () => {
  $scope.tableRows.push({
    agencyBudgeted: '',
    piBudgetedAmount: '',
    piAdjustedBudget: '',
    comments: ''
  });
};

// 删除行
$scope.removeRow = (index) => {
  $scope.tableRows.splice(index, 1);
};

2. 改写表格结构，用ng-repeat渲染所有行：

<table id='myTable' width='100%' >
  <tbody>
    <tr id="FacultyEmployees">
      <th width="25%">报告参考编号</th>
      <th width="25%">项目编号</th>
      <th width="25%">备注</th>
      <th width="25%">操作</th>
    </tr>
    <tr ng-repeat="row in tableRows track by $index">
      <td width="25%" class="border">
        <input class="form-control c-edit" ng-model="row.agencyBudgeted" type="text" />
        <span class="c-disp">{{ row.agencyBudgeted }}</span>
      </td>
      <td width="25%" class="border">
        <input class="form-control c-edit" ng-model="row.piBudgetedAmount" type="text" />
        <span class="c-disp">{{ row.piBudgetedAmount }}</span>
      </td>
      <td width="25%" class="border">
        <input class="form-control c-edit" ng-model="row.piAdjustedBudget" type="text" />
        <span class="c-disp">{{ row.piAdjustedBudget }}</span>
      </td>
      <td width="22%" class="border">
        <input class="form-control c-edit" ng-model="row.comments" type="text" />
        <span class="c-disp">{{ row.comments }}</span>
      </td>
      <td><button type='button' ng-click="addRow()">+</button></td>
      <td><button type='button' ng-click="removeRow($index)" ng-if="$index > 0">-</button></td>
    </tr>
  </tbody>
</table>

所有行的数据都统一存在$scope.tableRows数组中，导出PDF时直接遍历这个数组即可拿到全部行的数据，不需要读取DOM。

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