AngularJS, how do I make the UI dependent on which field has focus?

Question

AngularJS, how do I make the UI dependent on which field has focus?

I have an AngularJS page with several form inputs.

When the some of the inputs have focus, I want to change other, arbitrary, aspects of the page.

For example, when the user is in the 'stock code' input, I want to display the list of popular stock codes. When they are in the 'qty' field I want to show in-stock quantities and lead times.

Is there a variable which contains the 'current' input (the one which has focus), or do I need to revert to jQuery's onFocus. (It seems a little primitive now.)

javascript
html5
angularjs

Answer 1

How about make a directive? You could set a variable whenever the user leaves/enters the input, and detect that: http://jsfiddle.net/TZnj2/

Be sure to read the directive guide if you're confused as to what's happening: http://docs.angularjs.org/guide/directive

Also I use scope.$apply in that directive, here's an explanation of what that does: http://docs.angularjs.org/api/ng.$rootScope.Scope#$apply

Answer 2

ngFocus and ngBlur are built-in directives:

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

Try demo on jsfiddle