AngularJS：如何从表单现有对象中获取修改后的键值对

这问题我之前在项目里遇到过类似场景，核心思路就是先保存原始对象的完整副本，提交时对比当前对象和原始副本的差异，只收集有变化的键值对发送给服务器。下面是具体的AngularJS实现步骤：

1. 初始化时保存原始对象的深拷贝 #

在控制器初始化阶段，用AngularJS内置的angular.copy()方法创建原始对象的深拷贝——注意必须用深拷贝，浅拷贝会导致原始副本和当前对象共享引用，后续修改会同步影响副本，失去对比意义。

// 假设你的控制器里已经定义了$scope.obj
$scope.originalObj = angular.copy($scope.obj);

2. 编写差异对比函数 #

写一个工具函数，遍历当前对象的所有键，和原始副本对应的值做对比，只保留不一致的键值对。这里用angular.equals()而不是===，因为它能正确处理复杂类型（比如嵌套对象、数组）的相等性判断。

$scope.getChangedValues = function() {
  const changedData = {};
  
  // 遍历当前对象的每个键值对
  angular.forEach($scope.obj, function(currentValue, key) {
    const originalValue = $scope.originalObj[key];
    // 对比原始值和当前值，不相等则加入结果对象
    if (!angular.equals(currentValue, originalValue)) {
      changedData[key] = currentValue;
    }
  });
  
  return changedData;
};

3. 修改提交逻辑，发送差异数据 #

更新submit函数，调用上面的对比函数获取变化的键值对，然后把这个差异对象发送给服务器，而不是整个$scope.obj：

$scope.submit = function() {
  const changedData = $scope.getChangedValues();
  
  // 这里用$http发送请求，示例为POST
  $http.post('/your-api-endpoint', changedData)
    .then(function(response) {
      console.log('提交成功', response);
      // 可选：提交成功后更新原始副本，这样后续提交只会对比本次之后的变化
      $scope.originalObj = angular.copy($scope.obj);
    })
    .catch(function(error) {
      console.error('提交失败', error);
    });
};

额外注意事项 #

• 如果你的$scope.obj包含嵌套的复杂对象（比如对象里还有子对象），angular.copy()和angular.equals()都能完美处理深层次的拷贝和对比，不需要额外处理。
• 如果存在用户新增键的场景（你的案例是固定100个键，可能不需要），可以在遍历的时候增加判断：如果原始副本里没有该键，也将其加入差异对象。
• 提交成功后更新原始副本是个推荐操作，这样用户后续修改时，只会提交本次提交之后的变化，而不是始终和初始化的原始值对比。

内容的提问来源于stack exchange，提问作者Mr.Pandya