How can I make angularjs ngChange handler be called only when user finishes typing

Question

I have an input field, where I want to apply the variant of ngChange.

The input field is sort of binding with an ajax call, when user changes the input, the server side will process the data, however, I don't wanna make the call too often.

Say the user wanna input a really string, I want the call be made only after user finishes the word he is about to type. Nevertheless, I don't wanna use event such as blur. What would be a better way to implement this, rather than setTimeout?

http://stackoverflow.com/questions/22158063/angular-ngchange-variant-when-user-finishes-typing — imbond, Nov 11 '16 at 07:51

calebboyd · Accepted Answer · 2016-04-05T13:19:07.207

106

Use ng-model-options in Angular > 1.3

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

Without ng-model-options -- In markup:

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

In your backing controller/scope

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

Then your taskToDo will only run after 1000ms of no changes.

edited Apr 05 '16 at 13:19

answered Mar 03 '14 at 22:11

calebboyd

5,744
2
22
32

1

i tried this solution, but i am getting it immediately. can you tell me why ?here is the [plunker](http://plnkr.co/edit/NHYx0efhLkeFDqMFwCFw?p=preview) – codelearner Mar 25 '16 at 12:46
1

`ng-model-options` is only available after angular 1.3 – calebboyd Mar 25 '16 at 21:31
Thank you so much ... :) – Ronak Amlani Apr 04 '16 at 06:08
2

I Love ya'll...for real <3 – Let A Pro Do IT Oct 01 '16 at 17:47

score 38 · Answer 2 · edited May 23 '17 at 12:10

38

As of Angular 1.3, you could use Angular ng-model-options directive

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

Source: https://stackoverflow.com/a/26356084/1397994

edited May 23 '17 at 12:10

Community

1
1

answered Feb 12 '15 at 17:33

Adrien

715
6
14

i tried this solution, but i am getting it immediately. can you tell me why ?here is the [plunker](http://plnkr.co/edit/NHYx0efhLkeFDqMFwCFw?p=preview) – codelearner Mar 25 '16 at 12:45

score 1 · Answer 3 · answered Mar 03 '14 at 22:11

Write your own directive- this will only run the commands on myText based on the conditions you set

<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
                }
            });
        }
    }
})

How can I make angularjs ngChange handler be called only when user finishes typing

3 Answers3

Linked