Angularjs：値の変更中にinput [text] ngChangeが発生します

ngChangeは、値が変化しているときに発生します（ngChangeは、従来のonChangeイベントに似ていません）。クラシックなonChangeイベントをangularjsにバインドするにはどうすればよいですか？

現在のバインディング：

<input type="text" ng-model="name" ng-change="update()" />

この投稿は、blurイベントが発生するまでモデルの入力への変更を遅らせるディレクティブの例を示しています。

これは、新しいng-model-on-blurディレクティブでng-changeが機能することを示すフィドルです。これは元のフィドルを少し調整したものです。

ディレクティブをコードに追加する場合は、バインディングを次のように変更します。

<input type="text" ng-model="name" ng-model-onblur ng-change="update()" />

ここにディレクティブがあります：

// override the default input to update on blur
angular.module('app', []).directive('ngModelOnblur', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        priority: 1, // needed for angular 1.2.x
        link: function(scope, elm, attr, ngModelCtrl) {
            if (attr.type === 'radio' || attr.type === 'checkbox') return;

            elm.unbind('input').unbind('keydown').unbind('change');
            elm.bind('blur', function() {
                scope.$apply(function() {
                    ngModelCtrl.$setViewValue(elm.val());
                });         
            });
        }
    };
});

注：@wjinが以下のコメントで言及しているように、この機能はAngular 1.3（現在ベータ版）で直接サポートされていngModelOptionsます。詳しくはドキュメントをご覧ください。

これは、AngularJSに最近追加されたものであり、将来の回答として機能します（また、 別の質問についても）。

（現在ベータ版1.3で）角度の新しいバージョンは、AngularJSはネイティブに使用して、このオプションをサポートしていますngModelOptionsように、

ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }"

NgModelOptionsのドキュメント

例：

<input type="text" name="username"
       ng-model="user.name"
       ng-model-options="{updateOn: 'default blur', debounce: {default: 500, blur: 0} }" />

追加の「Enter」キープレスサポートを探している人がいる場合のために、Gloppyが提供するフィドルのアップデートを以下に示します。

キープレスバインディングのコード：

elm.bind("keydown keypress", function(event) {
    if (event.which === 13) {
        scope.$apply(function() {
            ngModelCtrl.$setViewValue(elm.val());
        });
    }
});

IE8で苦労している人（unbind（ 'input'）が気に入らない人）のために、私はそれを回避する方法を見つけました。

$ snifferをディレクティブに挿入して使用します。

if($sniffer.hasEvent('input')){
    elm.unbind('input');
}

IE8はこれを行うと落ち着きます:)

私の知識によると、selectオプションでng-changeを使用し、テキストボックスの場合はng-blurを使用する必要があります。

$ scope。$ watchを使用して、スコープ変数の変更をより適切に反映していませんか？

デフォルトの入力のonChange動作をオーバーライドします（コントロールの損失フォーカスと値が変更された場合のみ関数を呼び出します）

注：ngChangeは、値が変更されているときにイベントを発生させる従来のonChangeイベントとは異なります。このディレクティブは、フォーカスを取得したときに要素の値を保存します。
Onは、新しい値が変更されたかどうかをチェックし、変化した場合はイベントを発生させます。

@param {String}-「onChange」を起動する必要があるときに呼び出される関数名

@example <input my-on-change = "myFunc" ng-model = "model">

angular.module('app', []).directive('myOnChange', function () { 
    return {
        restrict: 'A',
        require: 'ngModel',
        scope: {
            myOnChange: '='
        },
        link: function (scope, elm, attr) {
            if (attr.type === 'radio' || attr.type === 'checkbox') {
                return;
            }
            // store value when get focus
            elm.bind('focus', function () {
                scope.value = elm.val();

            });

            // execute the event when loose focus and value was change
            elm.bind('blur', function () {
                var currentValue = elm.val();
                if (scope.value !== currentValue) {
                    if (scope.myOnChange) {
                        scope.myOnChange();
                    }
                }
            });
        }
    };
});

私はまったく同じ問題を抱えていましたが、これでうまくいきました。追加ng-model-updateしてng-keyup、準備完了です。ここにドキュメントがあります

 <input type="text" name="userName"
         ng-model="user.name"
         ng-change="update()"
         ng-model-options="{ updateOn: 'blur' }"
         ng-keyup="cancel($event)" />