20

ngModel次のように、バインディング付きのテキストボックスがあります。

<input type="text" ng-model="typing" />

このテキストボックスの値

value: {{ typing }}

入力中にモデルの遅延が値を更新するようにします。おそらく、500ms で入力を停止すると、モデルはすべての値 (テキスト ボックスに入力したすべてのもの) を更新します。私はいくつかのグーグルを作りますが、運はありません。誰にもアイデアはありますか？助けてください。

編集

このAngularjs: input[text] ngChange fires while the value is changingは、私の場合の解決策を提供しません。ぼかした後にソリューションの更新値をもたらしますが、テキストボックスをぼかすのではなく、入力を停止した後に値を更新したいです。

EDIT 2（回答）

angularバージョン1.4ではngModelOptions、私の場合、ディレクティブが役立ちます。このように記述<input ng-model="typing" ng-model-options="{ updateOn: 'default', debounce: {'default': 500, 'blur': 0} }" />して、デフォルトでモデル 500ms への更新値を遅らせ、フォーカスが失われた場合はすぐに更新できます。

4

2 に答える 2

13

モデルに 2 番目のプロパティを使用しても問題ない場合は、関数$scope.$watchと一緒に使用できます。debounce

HTML

<input type="text" ng-model="typing" />
<input type="text" value="{{ typed }}" />

Javascript

$scope.$watch('typing', debounce(function() {
    $scope.typed = $scope.typing;
    $scope.$apply();
}, 500));

独自のデバウンス関数を作成するか、既存のものを使用できます。ここに適切な実装があります。または、たまたま undescore.js を使用している場合は、既に設定されています。

jsFiddleの例を次に示します。

更新: Angular 1.3 には、ユーザー入力をデバウンスする方法が組み込まれています: ngModelOptions。

于 2013-08-05T04:40:51.397 に答える