如何发送已更改的 angular 表单数据？

Question

我有几个表单可以与后端服务交互以保存数据。

我想知道是否有标准的 angular 方法来检测模型的哪些属性已经更改并仅在 POST 中发送它们？当前，所有事件都在未更改时发送。

Answer 1

根据问题，可以有两种情况。

一旦用户填写了字段并单击“保存”按钮，这将最终发送一个 PATCH 请求以保存//更新值。
当用户更改值时，需要发出请求。

为1.

您可以通过维护哈希图来跟踪更改的内容。对所有用户输入字段使用 ng-modal 指令。假设有两个输入字段 i。 username 和 password.

<input type="text" ng-modal="username" />
<input type="password" ng-modal="password" />

在你的控制器中

$scope.userInfo = {
  user: $scope.username,
  pass: $scope.password
};

现在，如果有任何更改，它将通过双向绑定反映在您的视图和模型中。

所以，现在您可以比较旧值和新值并相应地发送所需的值。

为2.

使用Angular的watchCollection。

scope.$watchCollection('[username, password]', function () {
  // send a request
});

编辑

第二种方法可以使用去抖动方法

// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
_.debounce = function(func, wait, immediate) {
  var timeout, args, context, timestamp, result;

  var later = function() {
    var last = _.now() - timestamp;

    if (last < wait && last >= 0) {
      timeout = setTimeout(later, wait - last);
    } else {
      timeout = null;
      if (!immediate) {
        result = func.apply(context, args);
        if (!timeout) context = args = null;
      }
    }
  };

  return function() {
    context = this;
    args = arguments;
    timestamp = _.now();
    var callNow = immediate && !timeout;
    if (!timeout) timeout = setTimeout(later, wait);
    if (callNow) {
      result = func.apply(context, args);
      context = args = null;
    }

    return result;
  };
};

来源：https://github.com/jashkenas/underscore/blob/master/underscore.js

Answer 2

没有标准的方法。这是另一种没有观察者的方法。您可以将 'form' 作为更新的参数之一传递，并使用 'form' 来识别哪些控件已变脏。

http://plnkr.co/edit/8Og1m8eM54eOzKMDJtfJ?p=preview

.controller('ExampleController', ['$scope', function($scope) {
  $scope.user = {}
  var formFields = ['firstName', 'lastName'];

  $scope.update = function(form, user) {
    $scope.updatedFields = {};
    angular.forEach(formFields, function(field) {
      if (form[field].$dirty) {
        $scope.updatedFields[field] = $scope.user[field];
        //Temporarily set the field back to pristine.
        //This is only for demo
        form[field].$dirty = false;
      }
    });
  };
}]);

您可以使用相同的字符串输入名称和型号。

 <input type="text" ng-model="user.firstName" name="firstName"/>

如何发送已更改的 angular 表单数据？

How to send angular form data that has changed?

javascript

angularjs

angular-resource