Как я могу заставить обработчик angularjs ngChange вызываться только тогда, когда пользователь заканчивает печатать

У меня есть поле input, где я хочу применить вариант ngChange.

Поле input является своего рода привязкой с вызовом ajax, когда пользователь меняет ввод, серверная сторона обрабатывает данные, однако я не хочу слишком часто звонить.

Скажите, что пользователь хочет ввести действительно строку, я хочу, чтобы вызов выполнялся только после того, как пользователь закончил слово, которое он собирается напечатать. Тем не менее, я не хочу использовать событие, такое как размытие. Какой был бы лучший способ реализовать это, а не setTimeout?

Ответы

Ответ 1

Используйте ng-model-options в Angular > 1.3

 <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 мс без изменений.

Ответ 2

Как и в случае с Angular 1.3, вы можете использовать директиву Angular ng-model-options

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

Источник: fooobar.com/questions/43194/...

Ответ 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
                }
            });
        }
    }
})