50

inputのバリアントを適用したいフィールドがありますngChange。

フィールドは ajax 呼び出しによるバインドのようなものです。inputユーザーが入力を変更すると、サーバー側でデータが処理されますが、あまり頻繁に呼び出したくありません。

ユーザーが実際に文字列を入力したいとします。ユーザーが入力しようとしている単語を終了した後にのみ呼び出しを行いたいとします。とはいえ、ぼかしなどのイベントは使いたくない。ではなく、これを実装するより良い方法は何でしょうsetTimeoutか?

4

3 に答える 3

106

ng-model-optionsAngular > 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);
}

その後、taskToDo1000ミリ秒の変更がない場合にのみ実行されます。

于 2014-03-03T22:11:49.213 に答える
1

独自のディレクティブを作成します。これにより、設定した条件に基づいて 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
                }
            });
        }
    }
})
于 2014-03-03T22:11:45.917 に答える