2012-06-21 6 views
9

Tengo una página AngularJS con varias entradas de formulario.AngularJS, ¿cómo hago que la UI dependa de qué campo tiene foco?

Cuando algunas de las entradas tienen foco, quiero cambiar otros aspectos arbitrarios de la página.

Por ejemplo, cuando el usuario está en la entrada 'Código de stock', quiero mostrar la lista de códigos de inventario populares. Cuando están en el campo 'qty' quiero mostrar las cantidades en stock y los plazos de entrega.

Hay una variable que contiene la entrada 'actual' (la que tiene foco), o debo volver a jQuery's onFocus. (Parece un poco primitivo ahora.)

Respuesta

10

¿Qué le parece hacer una directiva? Se podría establecer una variable cada vez que el usuario sale/entra en la entrada, y detecta que: http://jsfiddle.net/TZnj2/

Asegúrese de leer la guía directiva si usted está confundido en cuanto a lo que está sucediendo: http://docs.angularjs.org/guide/directive

También utilizo alcance. $ aplicar en dicha Directiva, aquí está una explicación de lo que hace: http://docs.angularjs.org/api/ng.$rootScope.Scope#$apply

+0

Gran parte de Angular JS parece elegante, sin embargo, parece que hay un montón de código para lograrlo: ¿olvidaron las directivas ngFocus y ngBlur? –

+2

Así que quieres elegante Prueba esto, luego :-D: http://jsfiddle.net/andytjoslin/3Aevb/1/. Y Angular simplemente no quería escribir directivas para _todo_, supongo. ng-click y ng-dblclick etc son solo directivas, yunno. Nada especial. –

+0

Solo mi opinión, pero sigo creyendo que jQuery tiene una mejor lectura en este caso particular de desenfoque/enfoque (he diseñado esto usando un objeto, podría salirse con menos código si estuviera en línea) http://jsfiddle.net/gregk/r2336/ –

8

ngFocus y ngBlur son directivas incorporadas:

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

Try demo on jsfiddle

Cuestiones relacionadas