AngularJS将同一个侦听器绑定到不同的输入，如何获取输入值

angularjs bind the same listener to different inputs, how to get input value

本文关键字：输入 何获取 获取 侦听器 同一个 绑定 AngularJS      更新时间：2023-09-26

>我有几个绑定到不同模型字段的输入，如model.a和model.b，我需要发送服务器请求以获取自动完成数据。所以两者的逻辑是相同的。我想为每个ng-change="changeHandler()"添加指令。但是在changeHandler()内部我需要获取输入值 - 如何正确执行此操作？我不能只采用一些模型字段，因为我对两个字段都有相同的代码。

如果你想做到这一点，而不在每次更改时都触发对 Web API 的 GET，你必须变得更加复杂。

在model.a或model.b（或两者）上设置$watch

在$watch处理程序中，通过 Promise 拉取自动完成结果，它看起来有点像这样： 

myModule.factory('HelloWorld', function($q, $timeout) {
  var getMessages = function() {
    var deferred = $q.defer();
    $timeout(function() {
      deferred.resolve(['Hello', 'world!']);
    }, 2000);
    return deferred.promise;
  };
  return {
    getMessages: getMessages
  };
});
// from: http://markdalgleish.com/2013/06/using-promises-in-angularjs-views/

然后将自动完成绑定到承诺的结果。

您还需要对更改进行去抖动，这篇SO帖子可能会有所帮助：如何在AngularJS中编写去抖动服务

我认为这篇博文可能会有所帮助： http://www.grobmeier.de/angular-js-autocomplete-and-enabling-a-form-with-watch-and-blur-19112012.html#.UkMBIB1Dsak

将模型名称作为参数传递到更改函数中：

<input type='text' ng-model='testinput' ng-change='changeHandler(testinput)'/>

您可以将所有这些内容包装在一个可以访问 scope.model.a 的指令中，也可以像这样做：

ng-change="chanageHandler(model.a)" ng-model="model.a"

相关文章：