对单个输入进行模糊处理的 AJAX 请求答案

【问题标题】：Make AJAX Request on Blur for single Input对单个输入进行模糊处理的 AJAX 请求
【发布时间】：2015-02-08 16:21:16
【问题描述】：

我对 Angular 很陌生，并且有这样的表单（大约 15 个输入和选择）：

<div id="configForm" data-ng-controller="seutpController">
    <form name="configForm" data-ng-submit="update()" novalidate>
        <input id="id" type="hidden" data-ng-model="config.id" />
        <input id="company" type="text" data-ng-model="config.company" data-ng-blur="test()"/>
        <input id="street" type="text" data-ng-model="config.street" data-ng-blur="test()" />
    </form>
    <input type="submit" />
</div>

什么已经在起作用：

在提交时进行 AJAX 调用，它使用配置对象中的所有值更新数据库。没什么大不了的。

我想做的事：

进行 AJAX 调用（在 Blur 上），但我只想发送一个由用户更改的键/值对，例如：

$http({
    url: 'api/setConfig.php',
    method: 'POST',
    data: {'company': 'value'}
})

我是否必须将 $event 作为函数参数发送，例如 ng-blur="test($event)" 并从那里获取元素 ID 和值？

谢谢@大家！

编辑

是否可以使用 $watchCollection 并监视 $scope.config 对象？

【问题讨论】：

事件本身可能并不有趣，但您可以将已模糊的字段作为参数传递给ng-blur 函数，例如ng-blur('company')。在您的控制器中，只需验证此更新后的字段并通过 $http 调用将其传递给服务器。
已经在考虑这个了。会工作。感谢您的帮助。
NP！回复：$watchCollection 问题，这种方法可能也有效，但我认为它会在输入字段中的每次击键时触发。这将使确定输入字段编辑何时完成并应保留到后端变得更加复杂。但是，如果您想要那种容错能力，这可能是在 5 秒超时后处理保存的好方法。

标签： ajax angularjs forms

【解决方案1】：

我会说最好发送 $event，因为那将是最可扩展的解决方案。我过去做过类似的事情：

<input name="title" ng-blur="ctrl.onFieldChanged($event)" type="text" ng-model="ctrl.title"/>

在我的方法中，为了方便起见，我将输入命名为与其绑定的 ng-model 相同的名称。在控制器中，我是这样做的：

this.onFieldChanged = function ($event) {
    var data = {};
    data[$event.currentTarget.name] = self[$event.currentTarget.name];

    $http({
      url: '...',
      method: 'POST',
      data: data
    });
  };

希望这会有所帮助。

【讨论】：

谢谢，我已经这样做了，但是它开始感觉有点脏，将整个 $event 作为参数发送只是获取键名（'company'）。

【解决方案2】：

在视图中

onblur=test(config.company,'name')

在控制器中

    $scope.test = function(value,name){

             $http({
      url: '...',
      method: 'POST',
      name: value
    });

希望对你有帮助

【讨论】：