web-dev-qa-db-ja.com

キーを押してEnterでのみAngularJS ng-modelを更新しますか？

検索に使用している次の入力フィールドがあります。

<input id="search_input" type="text" ng-model="filter.search_terms">

私が使用している他の多くのフィルター（チェックボックス、ラジオなど）もあり、フィルターに$ watchを設定しているため、変更を加えると検索が実行されます。問題は、文字を入力するたびにテキストフィールドの検索が実行されないようにして、Enterキーを押したときにのみfilter.search_termsにそれを「保存」することです。

これを行う簡単な方法はありますか、またはng-modelを削除して、Enterで設定する関数を使用してng-clickを実行する必要がありますか？

angularjsangular-ngmodel
16
Dragonfly

追加してみてくださいng-model-options="{updateOn : 'change blur'}"を入力タグに追加します。うまくいくはずです。

34
MiTa

ここでの回答はどちらも質問に完全には答えていないようです。問題は、Enterキーを押したときにのみモデルを更新する方法でした。元のポスターは進んでいると思いますが、これを見つける可能性のある人のために、私のアプローチを追加します。忍者ピクセルが一番近いと思います。私の返答は彼の指示に基づいています。

ただし、欠落している部分が原因で、デフォルトのng-modelディレクティブが他の場合に更新されません。そのために、キーアップ時に更新するオプションを入力に追加しました。

ng-model-options="{updateOn: 'keyup'}"

これは、（テキストフィールドの）入力イベントで更新するデフォルトをオーバーライドし、キーアップ時に更新を強制的に実行します。これにより、カスタムキーアップハンドラーでイベントの伝播を停止することにより、元のng-modelディレクティブのデフォルトアクションを防ぐことができます。

if (ev.keyCode !== 13) return ev.stopImmediatePropagation();

動作するコードペンはここにあります： http://codepen.io/jessehouchins/pen/MbmEgM

13
Jesse Houchins

updateOnEnterというディレクティブを作成し、この属性をHTML要素に追加することで、この動作を実現できます。

<input id="search_input" type="text" update-on-enter ng-model="filter.search_terms">

angular.module('app').directive('updateOnEnter', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attrs, ctrl) {
            element.on("keyup", function(ev) {
                if (ev.keyCode == 13) {
                    ctrl.$commitViewValue();
                    scope.$apply(ctrl.$setTouched);
                }
            });
        }
    }
});
8
ninjaPixel