Update AngularJS ng-Modell nur bei Tastendruck eingeben?

Ich habe dieses Eingabefeld I für eine Suche bin mit:Update AngularJS ng-Modell nur bei Tastendruck eingeben?

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

Es gibt viele andere Filter ich auch verwenden (Kontrollkästchen, Radio, usw.) und ich habe ein $ Uhr auf Filter, so werden alle Änderungen Feuer eine Suche. Das Problem ist, dass ich nicht möchte, dass die Suche für das Textfeld jedes Mal, wenn ich einen Buchstaben einlege, und nur wollen, dass es auf dem filter.search_terms nur einmal "Enter" speichert.

Gibt es eine einfache Möglichkeit, dies zu tun, oder muss ich das ng-Modell entfernen und einen ng-Klick mit einer Funktion ausführen, die es auf Enter setzt?

Quelle

2014-08-27 Dragonfly

Sie können versuchen, ng-model-options="{updateOn : 'change blur'}" zu Ihrem Eingabe-Tag hinzuzufügen. Sollte arbeiten.

Quelle

2014-08-27 18:58:14 MiTa

das ist es. Bin ich der Einzige, der erwartet hat, dass die Dokumentation (z. B. https://docs.angularjs.org/api/ng/directive/ngModelOptions) eine Liste dessen enthalten würde, was Sie in ng-model-options einfügen können und was sie tun würde machen? Es ist mir nicht klar, warum "Unschärfe ändern" das besondere Verhalten hat, das es hat. –

Dies funktioniert nicht mit IE11, da im IE das Ereignis "change" nicht ausgegeben wird, wenn die "Enter" -Taste gedrückt wird. Die Art, wie ich daran gearbeitet habe, ist, dass ich das "change" -Ereignis durch ein benutzerdefiniertes "keydown_enter" ersetzt habe und eine Direktive erstellt habe, die "keydown_enter" ausgibt, wenn "keydown" mit 'keycode === 13' auf dem DOM-Element ausgelöst wird. Fyi –

Sie können dieses Verhalten erreichen, indem Sie eine Direktive namens updateOnEnter erstellen und dann dieses Attribut zu Ihrem HTML-Element hinzufügen.

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

Quelle

2015-10-05 13:23:31 ninjaPixel

was hier angelt ** nicht ** zu aktualisieren, es sei denn, der Schlüssel geht nach oben? Ich sehe das Ereignis, aber was verhindert die normale Aktualisierung des Modells? – jeremy

auch dupliziert auf https://stackoverflow.com/questions/32176130/angular-update-input-value-on-enter-keypress-and-work-in- –

@jeremy: Ihre Frage wurde auf Top-Kommentar https beantwortet : //stackoverflow.com/a/40756181/704246 –

Keine der Antworten hier scheint die Frage vollständig zu beantworten. Die Frage war, wie man das Modell NUR beim Drücken von Enter aktualisieren soll. Ich bin mir sicher, dass das Original-Poster weitergezogen ist, aber für andere, die das vielleicht finden, füge ich meine Vorgehensweise hinzu. Ich denke, ninjaPixel kam am nächsten. Meine Antwort basiert auf seiner Richtlinie.

Das fehlende Teil verhindert jedoch, dass die Standard-ng-model-Direktive in anderen Fällen aktualisiert wird. Um dies zu erreichen, habe ich eine Option, um den Eingang auf keyup zu aktualisieren:

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

Dies ist die Standardeinstellung überschreibt die Updates auf Eingabeereignisse (für Textfelder) und erzwingt das Update auf keyup auftreten. Auf diese Weise können unsere Richtlinie durch Anhalten Ereignispropagierung in unserem benutzerdefinierten keyup Handler des Original ng-Modell-Richtlinie der Standardaktion verhindern: hier

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

Eine Arbeits codepen finden: http://codepen.io/jessehouchins/pen/MbmEgM

Quelle

2016-11-23 04:41:16

Update AngularJS ng-Modell nur bei Tastendruck eingeben?

Antwort

Verwandte Themen