Angularjs: input [text] ngChange wird ausgelöst, während sich der Wert ändert

ngChange wird ausgelöst, während sich der Wert ändert (ngChange ähnelt nicht dem klassischen onChange-Ereignis). Wie kann ich das klassische onChange-Ereignis mit anglejs binden, das nur ausgelöst wird, wenn der Inhalt festgeschrieben wird?

Aktuelle Bindung:

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

Dieser Beitrag zeigt ein Beispiel für eine Direktive, die die Modelländerungen an einer Eingabe verzögert, bis das Unschärfeereignis ausgelöst wird.

Hier ist eine Geige, die zeigt, wie ng-change mit der neuen Direktive ng-model-on-blur funktioniert. Beachten Sie, dass dies eine leichte Änderung der ursprünglichen Geige ist .

Wenn Sie die Direktive zu Ihrem Code hinzufügen, ändern Sie Ihre Bindung wie folgt:

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

Hier ist die Richtlinie:

// 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());
                });         
            });
        }
    };
});

Hinweis: Wie @wjin in den Kommentaren unten erwähnt, wird diese Funktion direkt in Angular 1.3 (derzeit in der Beta) über unterstützt ngModelOptions. Weitere Informationen finden Sie in den Dokumenten .

Hier geht es um die jüngsten Ergänzungen von AngularJS, die als zukünftige Antwort dienen sollen (auch für eine andere Frage ).

Angular neuere Versionen (jetzt in 1.3 Beta) unterstützt AngularJS nativ diese Option verwenden ngModelOptions, wie

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

NgModelOptions-Dokumente

Beispiel:

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

Falls jemand anderes für zusätzliche suchen „enter“ keypress Unterstützung, hier ist ein Update für die Geige , bereitgestellt durch gloppy

Code für die Tastendruckbindung:

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

Für alle, die mit IE8 zu kämpfen haben (es mag das Aufheben der Bindung ('Eingabe') nicht), habe ich einen Weg gefunden, dies zu umgehen.

Fügen Sie $ sniffer in Ihre Direktive ein und verwenden Sie:

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

IE8 beruhigt sich, wenn Sie dies tun :)

Meines Wissens sollten wir ng-change mit der Auswahloption verwenden und im Textfeldfall ng-blur verwenden.

Wird $ scope. $ Watch nicht verwendet, um die Änderungen der Bereichsvariablen besser widerzuspiegeln?

Überschreiben Sie die Standardeingabe für das Änderungsverhalten (rufen Sie die Funktion nur auf, wenn der Fokus und der Wert des Kontrollverlusts geändert wurden).

HINWEIS: ngChange ähnelt nicht dem klassischen onChange-Ereignis, das das Ereignis auslöst, während sich der Wert ändert. Diese Anweisung speichert den Wert des Elements, wenn es den Fokus erhält.
Bei Unschärfen wird geprüft, ob sich der neue Wert geändert hat, und wenn ja, wird das Ereignis ausgelöst

@param {String} - Funktionsname, der aufgerufen werden soll, wenn "onChange" ausgelöst werden soll

@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();
                    }
                }
            });
        }
    };
});

Ich hatte genau das gleiche Problem und das hat bei mir funktioniert. Fügen Sie hinzu ng-model-updateund ng-keyupund Sie können loslegen! Hier ist die Dokumentation

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