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

AngularjsAngularjs Ng-ChangeAngular Ngmodel

Angularjs Problem Overview


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?

Angularjs Solutions


Solution 1 - Angularjs

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.

Solution 2 - Angularjs

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

Solution 3 - Angularjs

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Question9blueView Question on Stackoverflow
Solution 1 - AngularjscalebboydView Answer on Stackoverflow
Solution 2 - AngularjsAdrienView Answer on Stackoverflow
Solution 3 - AngularjskoolunixView Answer on Stackoverflow