switch - ¿Cómo puedo hacer que se llame a angularjs ngChange Handler solo cuando el usuario termine de escribir

ng-href angular 4

Question

Tengo un campo de input , donde quiero aplicar la variante de ngChange .

El campo de input es una especie de enlace con una llamada ajax, cuando el usuario cambia la entrada, el lado del servidor procesará los datos, sin embargo, no quiero hacer la llamada con demasiada frecuencia.

Supongamos que el usuario quiere ingresar una cadena realmente, quiero que la llamada se realice solo después de que el usuario termine la palabra que está a punto de escribir. Sin embargo, no quiero usar eventos como desenfoque. ¿Cuál sería una mejor manera de implementar esto, en lugar de setTimeout ?

Answer 1

A partir de Angular 1.3, podría usar la directiva Angular ng-model-options

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

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

Answer 2

Escriba su propia directiva: esto solo ejecutará los comandos en myText en función de las condiciones que establezca

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

Answer 3

Utilice ng-model-options en Angular> 1.3

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

Sin ng-model-options - En marcado:

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

En su controlador / alcance de respaldo

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

Entonces su taskToDo solo se ejecutará después de 1000 ms sin cambios.