2012-06-21 15 views
9

Ich habe eine AngularJS-Seite mit mehreren Formulareingaben.AngularJS, wie mache ich die UI davon abhängig, welches Feld den Fokus hat?

Wenn einige der Eingänge Fokus haben, möchte ich andere, beliebige Aspekte der Seite ändern.

Wenn der Benutzer zum Beispiel die Eingabe 'Lagercode' verwendet, möchte ich die Liste der beliebten Lagercodes anzeigen. Wenn sie im Feld "Menge" sind, möchte ich die Lagermengen und Durchlaufzeiten anzeigen.

Gibt es eine Variable, die den 'aktuellen' Eingang enthält (den, der den Fokus hat), oder muss ich zu jQuerys onFocus zurückkehren. (Es scheint jetzt ein wenig primitiv.)

Antwort

10

Wie wäre es mit einer Direktive? Sie könnten eine Variable gesetzt, wenn der Benutzer verlässt/den Eingang betritt, und erkennen, dass: http://jsfiddle.net/TZnj2/

Achten Sie darauf, die Richtlinie Anleitung zu lesen, wenn Sie zu verwirrt sind, was geschieht: http://docs.angularjs.org/guide/directive

Ich benutze auch Umfang. $ in dieser Richtlinie gelten, hier ist eine Erklärung, was das bedeutet: http://docs.angularjs.org/api/ng.$rootScope.Scope#$apply

+0

So viel von Angular JS scheint elegant, dies scheint jedoch eine Menge Code, um dies zu erreichen - haben sie ngFocus und ngBlur Direktiven vergessen? –

+2

So wollen Sie elegant Versuchen Sie dies auf, dann :-D: http://jsfiddle.net/andytjoslin/3Aevb/1/. Und Angular wollte einfach nicht Anweisungen für _everything_ schreiben, denke ich. ng-click und ng-dblclick usw. sind nur Direktiven, yunno. Nichts Besonderes. –

+0

Nur meine Meinung, aber ich denke immer noch, dass jQuery besser in diesem bestimmten Unschärfe/Fokus-Fall liest (Ich überging dies mit einem Objekt, könnte mit weniger Code entkommen, wenn es inline wäre) http://jsfiddle.net/gregk/r2336/ –

8

ngFocus und ngBlur sind eingebaut in den Richtlinien:

<input ng-focus="hasFocus = true" ng-blur="hasFocus = false" type="text"> 
<p ng-show="hasFocus">The field has focus!!</p> 

Try demo on jsfiddle

Verwandte Themen