how to focus on input element generated by ng-repeat?

[bkc]

I have a form that uses ng-repeat with orderBy

When a user clicks 'add' my controller pushes a mapping into an array and ng-repeat updates the html. Very nice.

From a usability standpoint, it would be helpful to the user to focus on one of the newly added input elements.

What is the best way to accomplish this?

1. Have to know when the html has been updated

2. need to figure out how to determine the html element that corresponds to the javascript array item

3. I could associate a directive with the input element(s), but the add button is outside of ng-repeat, how do I broadcast an event into the correct ng-repeat scope so the correct directive is activated?

[Vojta Jína]

How about this http://jsfiddle.net/vojtajina/nycgX/ ?

V.

> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To view this discussion on the web visit
> https://groups.google.com/d/msg/angular/-/0ScMzS7wCfMJ.
> To post to this group, send email to ang...@googlegroups.com.
> To unsubscribe from this group, send email to
> angular+u...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/angular?hl=en.

[bkc]

On Sunday, May 20, 2012 10:43:09 PM UTC-4, Vojta Jína wrote:

How about this http://jsfiddle.net/vojtajina/nycgX/ ?

Hmm, that's  interesting.   I added orderBy to better match my environment http://jsfiddle.net/9u8Jz/1/ and it still works.

It appears that var timer will be shared among all elements that use this directive, is that correct?

So only the most recently rendered input box will receive focus (in my case, that's ok).

I'm curious how this works with orderBy. It seems like angular isn't regenerating all the html, but rather only generating the newly added input element but it then figures out where to insert it into the DOM. Is that correct?

Thanks for the solution..

[Vojta Jína]

See in-lined...

On Mon, May 21, 2012 at 11:36 AM, bkc <bkcle...@gmail.com> wrote:
> On Sunday, May 20, 2012 10:43:09 PM UTC-4, Vojta Jína wrote:
>>
>> How about this http://jsfiddle.net/vojtajina/nycgX/ ?
>>
>
> Hmm, that's  interesting.   I added orderBy to better match my environment
> http://jsfiddle.net/9u8Jz/1/ and it still works.
>
> It appears that var timer will be shared among all elements that use this
> directive, is that correct?

Yes, the directive is instantiated only once per injector lifecycle,
which in production means once.

>
> So only the most recently rendered input box will receive focus (in my case,
> that's ok).

Yes, that was my intent. You can't focus multiple inputs anyway.

>
> I'm curious how this works with orderBy. It seems like angular isn't
> regenerating all the html, but rather only generating the newly added input
> element but it then figures out where to insert it into the DOM. Is that
> correct?

Yes, that's correct. The reason is better performance.


>
> Thanks for the solution..

>
> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To view this discussion on the web visit

> https://groups.google.com/d/msg/angular/-/HRGKWMlGskEJ.

[Suller Andras]

A simple autofocus attribute could be enough in some cases:
http://jsfiddle.net/t63dq/
Note that it is HTML5.

Andras

[Vojta Jína]

Nice, I didn't know about this...

V.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.

[Casper Pascal]

I think we don't have to use timeout for this ^ ^

http://jsfiddle.net/9u8Jz/4/

[Elliott Regan]

Do you know why I needed to user elm[0].focus() instead of just elm.focus() as it is in your fiddle?

When I used elm.focus() on my local setup, I got a "Type undefined: elm.focus is not a function" error. (angular 1.2.14, current browsers)

On Sunday, May 20, 2012 10:43:09 PM UTC-4, Vojta Jína wrote:

[Casper Pascal]

I think because elm is an object that's defined by angular (not sure why), and elm[0] is an actual DOMElement, so it has focus() method.

[Elliott Regan]

Weird, because I was using the directive in exactly the same way as in the fiddle.

[ravi tej]

Thanks Vojta.I was banging my head for the same scenario.Luckily I found this post.