如何仅在用户完成键入时才调用 angularjs ngChange 处理程序

Posted 2023-02-22

【中文标题】如何仅在用户完成键入时才调用 angularjs ngChange 处理程序

【英文标题】：How can I make angularjs ngChange handler be called only when user finishes typing

【发布时间】：2014-04-05 04:02:09

【问题描述】：

我有一个input 字段，我想在其中应用ngChange 的变体。

input 字段是一种与 ajax 调用的绑定，当用户更改输入时，服务器端将处理数据，但是，我不想经常调用。

假设用户想输入一个真正的字符串，我希望只有在用户完成他将要输入的单词后才进行调用。 不过，我不想使用诸如模糊之类的事件。有什么比setTimeout更好的方法来实现这个？

【问题讨论】：

***.com/questions/22158063/…

【参考方案1】：

在 Angular > 1.3 中使用 ng-model-options

 <input type="text"
         ng-model="vm.searchTerm"
         ng-change="vm.search(vm.searchTerm)"
         ng-model-options="debounce: 750" />

没有ng-model-options -- 在标记中：

<input ng-change="inputChanged()">

在您的支持控制器/范围内

var inputChangedPromise;
$scope.inputChanged = function()
    if(inputChangedPromise)
        $timeout.cancel(inputChangedPromise);
    
    inputChangedPromise = $timeout(taskToDo,1000);

那么您的 taskToDo 将仅在 1000 毫秒无更改后运行。

【讨论】：

我试过这个解决方案，但我马上就明白了。你能告诉我为什么吗？这里是plunker

ng-model-options 仅在 angular 1.3 之后可用

非常感谢... :)

我爱你……真的

【参考方案2】：

从 Angular 1.3 开始，您可以使用 Angular ng-model-options 指令

<input ng-change="inputChanged()" ng-model-options="debounce:1000">

来源：https://***.com/a/26356084/1397994

【讨论】：

我试过这个解决方案，但我马上就明白了。你能告诉我为什么吗？这里是plunker

【参考方案3】：

编写您自己的指令 - 这只会根据您设置的条件在 myText 上运行命令

<input my-change-directive type="text ng-model="myText" />

.directive('myChangeDirective',function() 
    return 
        require : 'ngModel',
        link : function($scope,$element,$attrs) 
            var stringTest = function(_string) 
                //test string here, return true
                //if you want to process it
            
            $element.bind('change',function(e)  
                if(stringTest($attrs.ngModel) === true) 
                    //make ajax call here
                    //run $scope.$apply() in ajax callback if scope is changed
                
            );
        
    
)