Ich habe eine Texteingabe und möchte nicht, dass Benutzer Leerzeichen verwenden, und alles, was eingegeben wird, wird in Kleinbuchstaben umgewandelt.
Ich weiß, dass ich keine Filter für ng-Modelle verwenden darf, z.
ng-model='tags | lowercase | no_spaces'
Ich wollte meine eigene Direktive erstellen, aber Funktionen hinzufügen $parsers
und $formatters
die Eingabe nicht aktualisieren, sondern nur andere Elemente, die ng-model
darauf enthalten waren.
Wie kann ich die Eingabe ändern, die ich gerade eingebe?
Ich versuche im Wesentlichen, die 'Tags'-Funktion zu erstellen, die genau wie die hier bei StackOverflow funktioniert.
angularjs
angularjs-filter
dom-manipulation
angularjs-ng-model
Andrew WC Brown
quelle
quelle
Antworten:
Ich würde vorschlagen, den Modellwert zu beobachten und ihn zu aktualisieren: http://plnkr.co/edit/Mb0uRyIIv1eK8nTg3Qng?p=preview
Das einzig interessante Problem betrifft Leerzeichen: In AngularJS 1.0.3 schneidet ng-model bei der Eingabe die Zeichenfolge automatisch ab, sodass nicht erkannt wird, dass das Modell geändert wurde, wenn Sie am Ende oder am Anfang Leerzeichen hinzufügen (sodass Leerzeichen von my nicht automatisch entfernt werden Code). In 1.1.1 gibt es jedoch die Anweisung 'ng-trim', mit der diese Funktionalität deaktiviert werden kann ( Festschreiben ). Daher habe ich mich für 1.1.1 entschieden, um die genaue Funktionalität zu erreichen, die Sie in Ihrer Frage beschrieben haben.
quelle
$watch
wird der Listener erneut aufgerufen. In einfachen Fällen (in denen Ihr Filter idempotent ist) wird der Filter bei jeder Änderung zweimal ausgeführt.Ich glaube, dass die Absicht von AngularJS-Eingaben und der
ngModel
Anweisung ist, dass ungültige Eingaben niemals im Modell landen sollten . Das Modell sollte immer gültig sein. Das Problem mit einem ungültigen Modell besteht darin, dass wir möglicherweise Beobachter haben, die auf der Grundlage eines ungültigen Modells feuern und (unangemessene) Maßnahmen ergreifen.Aus meiner Sicht besteht die richtige Lösung darin, die
$parsers
Pipeline anzuschließen und sicherzustellen, dass ungültige Eingaben nicht in das Modell gelangen. Ich bin mir nicht sicher, wie Sie versucht haben, Dinge anzugehen oder was genau bei Ihnen nicht funktioniert hat,$parsers
aber hier ist eine einfache Anweisung, die Ihr Problem (oder zumindest mein Verständnis des Problems) löst:Sobald die obige Richtlinie deklariert ist, kann sie wie folgt verwendet werden:
Wie in der von @Valentyn Shybanov vorgeschlagenen Lösung müssen wir die
ng-trim
Direktive verwenden, wenn Leerzeichen am Anfang / Ende der Eingabe nicht zugelassen werden sollen.Der Vorteil dieses Ansatzes ist zweifach:
quelle
modelCtrl.$setViewValue(transformedInput); modelCtrl.$render();
Nützlichem Link zur Dokumentation verbunden war: docs.angularjs.org/api/ng.directive:ngModel.NgModelController Ein Wort, um meine Lösung zu "schützen", ist, dass die Scope-Eigenschaft nicht nur vor Ansichten und geändert werden kann Mein Weg deckt dies ab. Ich denke, es hängt von einer tatsächlichen Situation ab, wie der Umfang geändert werden könnte.modelCtrl
ist der von der Direktive geforderte Controller. (require 'ngModel'
)Eine Lösung für dieses Problem könnte darin bestehen, die Filter auf der Controllerseite anzuwenden:
$scope.tags = $filter('lowercase')($scope.tags);
Vergessen Sie nicht,
$filter
als Abhängigkeit zu deklarieren .quelle
Wenn Sie ein schreibgeschütztes Eingabefeld verwenden, können Sie den ng-Wert mit Filter verwenden.
beispielsweise:
quelle
Verwenden Sie eine Direktive, die sowohl die Auflistungen $ formatters als auch $ parsers ergänzt, um sicherzustellen, dass die Transformation in beide Richtungen ausgeführt wird.
In dieser anderen Antwort finden Sie weitere Details, einschließlich eines Links zu jsfiddle.
quelle
Ich hatte ein ähnliches Problem und benutzte
In meinem Handler rufe ich eine Methode des objectInScope auf, um sich selbst korrekt zu ändern (grobe Eingabe). In der Steuerung habe ich irgendwo das initiiert
Ich weiß, dass hier keine ausgefallenen Filter oder Beobachter verwendet werden ... aber es ist einfach und funktioniert hervorragend. Der einzige Nachteil dabei ist, dass das objectInScope beim Aufruf an den Handler gesendet wird ...
quelle
Wenn Sie eine komplexe asynchrone Eingabevalidierung durchführen, kann es sich lohnen
ng-model
, eine Ebene als Teil einer benutzerdefinierten Klasse mit eigenen Validierungsmethoden zu abstrahieren .https://plnkr.co/edit/gUnUjs0qHQwkq2vPZlpO?p=preview
html
Code
quelle
Sie können dies versuchen
quelle