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
40,498 PointsangularJs Focusing problem on input element
Hello,
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.
http://pk-test-server-01.netau.net/#!/
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
Iain Simmons
Treehouse Moderator 32,305 PointsI 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
40,498 PointsI 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"/>
</div>
Patrick Koch
40,498 PointsPatrick Koch
40,498 PointsThanks, 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,
http://pk-test-server-01.netau.net/#!/
g patrick
Iain Simmons
Treehouse Moderator 32,305 PointsIain Simmons
Treehouse Moderator 32,305 PointsHi 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.