web-dev-qa-db-fra.com

Comment puis-je appeler le gestionnaire angularjs ngChange uniquement lorsque l'utilisateur a fini de taper

J'ai un champ input, où je veux appliquer la variante de ngChange.

Le champ input est une sorte de liaison avec un appel ajax, lorsque l'utilisateur modifie l'entrée, le côté serveur traitera les données, cependant, je ne veux pas faire l'appel trop souvent.

Supposons que l'utilisateur souhaite entrer une chaîne vraiment, je veux que l'appel ne soit effectué qu'après que l'utilisateur a fini le mot qu'il est sur le point de taper. Néanmoins, je ne veux pas utiliser d'événements tels que le flou. Quelle serait une meilleure façon de mettre en œuvre cela, plutôt que setTimeout?

angularjsangularjs-ng-changeangular-ngmodel
49
9blue

Utilisation 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}" />

Sans pour autant ng-model-options - En balisage:

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

Dans votre contrôleur/portée de support

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

Ensuite, votre taskToDo ne fonctionnera qu'après 1000 ms sans modifications.

105
calebboyd

À partir de Angular 1.3, vous pouvez utiliser Angular ng-model-options directive

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

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

38
Adrien

Écrivez votre propre directive - cela exécutera uniquement les commandes sur myText en fonction des conditions que vous définissez

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