Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial


Patrick Koch
Patrick Koch
40,496 Points

angularJs Focusing problem on input element


I worked through the angular basics course here on treehouse, and I wanted to do some improvements. I wanted to put to focus right into the input box if the label of the it gets clicked. Its working fine if I don't have the ng-hide or ng-show, on the input and label element. On this link a put both examples the first todolist ist with ng-hide and ng-show on the second without.


Is there a mistake I coded into, or any ng directive i can use to achieve this?

todo list 1
<label for="{{ $id }}-item" ng-click="editing = true" ng-hide="editing" class="editing-label">{{ todo.name }}</label>
<input id="{{ $id }}-item" type="text" ng-change="todo.edited = true" ng-blur="editing = false" ng-model="todo.name" ng-show="editing" ng-focus="editing">

todo list 2
<label for="{{ $id}}-item" ng-click="editing = true" class="editing-label">{{ todo.name }}</label>
<input id="{{ $id }}-item" type="text" ng-change="todo.edited = true" ng-blur="editing = false" ng-model="todo.name" ng-focus="editing">

greetings Patrick

2 Answers

I didn't have any issues just using regular HTML label tags and their for attributes, to match the id attribute of the text inputs.

The only thing I did differently was to put some text before the $id, rather than after it, since the id attribute shouldn't start with a number:

<label for="todo{{$id}}" ng-hide="editing" ng-click="editing = true">{{todo.name}}</label>
<input id="todo{{$id}}" ng-change="todo.edited = true" ng-blur="editing = false" ng-show="editing" ng-model="todo.name" class="editing-label" type="text"/>
Patrick Koch
Patrick Koch
40,496 Points

Thanks, Iain,

hm, I changed my ids and for attr. like you, but still I don't have my wished behavior. I try to explain it again, I want If I click on the label on the first list that my cursor jumps right into to the belonging, input field, at the moment it just shows up so I have to click a second time ( that I dont like ) that I can start writing. On the second list I just click on the label and can start typing in the input field.

I tested on my mac air in safari and chrome and either work.

I updated the code on the site,


g patrick

Hi Patrick Koch, your second example worked for me also. The other difference between my code and yours is that you're trying to use ng-focus, which actually fires when the element it is used on gains focus.

Try removing that from your first lot of inputs and see if it works.

Patrick Koch
Patrick Koch
40,496 Points

I somehow solved it, I just wrapped it with a div with a ng-init var .

<div ng-init="nameFocus = false" class="grid-content small-3">
  <label for="todo{{$id}}" ng-click="nameFocus = true" ng-hide="nameFocus" >{{todo.name}}</label>
  <input  id="todo{{$id}}" ng-model="todo.name" ng-change="todo.edited = true" ng-blur="nameFocus = false" ng-show="nameFocus"  class="editing-label"/>