AngularJS xeditable保存问题：将$data转为JSON对象发起PATCH请求

开发者阿泽

2026-5-15

解决Xeditable中单个字段编辑后生成合法JSON对象发送PATCH请求的问题

我明白你的困境——当用xeditable自动生成编辑字段时，没法像之前那样手动绑定每个ng-model来构建完整的更新对象。其实核心问题是你需要知道当前编辑的是哪个字段，然后把单个的$data值包装成对应的键值对对象。

这里有个简单直接的解决方案：

步骤1：在HTML中传递字段名给save函数

修改你的editable元素，把当前绑定的字段名称（比如company）作为第三个参数传给save函数：

<td data-title="'company'" >
  <p class="form-control-static"><a href="#" editable-text="customer.company" onbeforesave="save($data, customer.custref, 'company')">
    {{ customer.company || 'empty' }}
  </a></p>
</td>

步骤2：修改save函数构建合法JSON对象

在你的AngularJS控制器里，更新save函数，利用传入的字段名创建只包含当前修改字段的对象：

$scope.save = function(data, id, fieldName){
  console.log(data);
  // 使用ES6计算属性名创建对应字段的对象
  const updateObj = { [fieldName]: data };
  
  $http.patch(API_URL + "v1/customers/" + id, updateObj)
  .then(function (response) {
    console.log("更新成功！");
  },function error(response) {
    console.log('更新失败');
    $scope.error = response.statusText;
  });
};

适配多个字段的情况

对于其他30个字段，只需要重复这个模式就行，比如编辑联系人姓名的字段：

<td data-title="'contactName'" >
  <p class="form-control-static"><a href="#" editable-text="customer.contactName" onbeforesave="save($data, customer.custref, 'contactName')">
    {{ customer.contactName || 'empty' }}
  </a></p>
</td>

不管是editable-number、editable-select还是其他类型的xeditable控件，这个方法都适用，只要传入对应的字段名即可。