AngularJS如何获取输入框旧值以实现数据库数据编辑？

嘿，我来帮你搞定这个问题！你现在的核心困扰是：点击编辑后输入框的ng-model会实时覆盖原始数据，导致提交时拿不到初始的旧值。下面是具体的解决方案，一步步来调整你的代码：

核心思路 #

在触发编辑的瞬间，把当前数据的原始值保存到一个临时变量里，这样哪怕输入框修改了值，旧值也能被保留下来，提交时可以一起传给后端完成更新。

修改后的完整代码 #

1. 修正HTML循环项引用（你原来的代码有个小错误）

注意ng-repeat="d in data"里，每个循环项是d，不是data，不然所有行都会显示同一条数据。然后在点击编辑时保存旧值：

<tr ng-repeat="d in data"> 
  <!-- 显示模式：展示当前名称 -->
  <td ng-show="!show">{{d.name}}</td> 
  <!-- 编辑模式：输入框绑定当前项的name -->
  <td ng-show="show"> 
    <input type="text" class="form-text" size="20" ng-model="d.name"> 
  </td> 
  <td> 
    <!-- 编辑按钮：切换显示状态，同时保存当前name作为旧值 -->
    <a ng-click="show = !show; d.originalName = d.name" ng-show="!show" title="<?php print t("Edit"); ?>"><?php print t("Edit"); ?></a> 
    <!-- 保存按钮：切换显示状态，把旧值和新值传给editName函数 -->
    <a ng-click="show = !show; editName(d.originalName, d.name)" ng-show="show" title="<?php print t("Save"); ?>"><?php print t("Save"); ?></a> 
  </td> 
</tr>

2. 控制器代码优化（可选，增强体验）

你的控制器逻辑本身没问题，不过可以加个简单的提示让调试和用户体验更好：

$scope.editName = function(OldName, newName){ 
  $http.post("/api/data/edit/"+OldName+"/"+newName, { })
  .then(function(response){ 
    $scope.getData(); 
    alert('数据修改成功！');
  },function(error){ 
    alert('修改失败：' + (error.data?.message || '未知错误'));
  }); 
};

额外优化：取消编辑时恢复旧值 #

如果用户点击编辑后又不想修改了，我们可以在切换回显示模式时把d.name恢复成原始值，避免数据被意外修改。调整按钮的ng-click逻辑：

<!-- 编辑按钮 -->
<a ng-click="show = !show; if(show) { d.originalName = d.name; } else { d.name = d.originalName; }" ng-show="!show" title="<?php print t("Edit"); ?>"><?php print t("Edit"); ?></a> 
<!-- 保存按钮 -->
<a ng-click="show = !show; editName(d.originalName, d.name)" ng-show="show" title="<?php print t("Save"); ?>"><?php print t("Save"); ?></a> 

为什么这样有效？ #

当你点击编辑按钮时，d.originalName = d.name会把当前的原始值存到每个循环项的专属属性里。之后输入框修改的是d.name，但d.originalName会一直保留初始值，直到下一次点击编辑才会更新。这样提交时就能正确把旧值和新值传给后端API，完成数据库的更新操作。

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