How do I create double-click to edit?

[voiper]

Hi. A somewhat common thing it seems would be having data that I would like to double-click to edit and then press save (or just hit enter).

I see this in the todo example http://addyosmani.github.com/todomvc/architecture-examples/angularjs/ but I had no luck isolating the code responsible for that.

Is there some tutorial somewhere for having angular display data and on double-click the element turns into a text box that modifies the underlying model?

Thanks!

-Avi

[hat...@gmail.com]

In the demo, the section that is responsible for the double click is the ng-dblclick attribute. on line 29

<label ng-dblclick="editTodo(todo)">{{todo.title}}</label> 

When the element has been double clicked, the editTodo function on the controller is called. 

Here's a really simple example (click on item#1 or item#2 to edit):

http://jsfiddle.net/TQ6ne/

[Avi Marcus]

Thanks for the example! ng-hide/show sounds good for this. It seems to be a different method than the todo-MVC, which doesn't have ng-show/hide in it.

(The demo has editTodo(todo) run:

$scope.editTodo = function( todo ) {



    $scope.editedTodo = todo;



  };



And I don't see what that does. Anyway.)

That todo-MVC example also "finishes" editing onblur. I tried adding onblur (http://jsfiddle.net/YzD3H/) but it never seems to fire, nor does onchange.

Seems simple enough but I'm really not sure what I'm doing wrong with it.

(Hitting the escape button to revert changes would be nice, but a) the model updates instantly upon editing, so not sure what to return to b) escape-watching seems to be a bit complicated, not sure it's worth it.)

-Avi

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en.
 
 

[Ricardo Bin]

Hello voiper,

I see your code, it wont works cause has some little problems:

- native js events, like onblur doesnt works like angular events.

- the onblur event works better on input/textarea/etc fields, not on form.

But back to the problem -> angularjs doesnt provide a onblur event on ng module.

I did a very simple solution, using your existing fiddle, that binds ng-click on a big container, changing the behavior using event's target. 

Check this out:

http://jsfiddle.net/ricardohbin/YzD3H/1/

[Avi Marcus]

Doh I was applying it to the form, silly me.

That's an interesting work-around.

TodoMVC example does have an on-blur and on-focus binding, seemingly from here: https://github.com/addyosmani/todomvc/blob/master/architecture-examples/angularjs/js/directives/

The on-blur is normal but I'm not 100% sure how the focus part works.

(btw, on-blur only gets triggered after the cursor is in the box)

So using those directives for onblur/onfocus... here's the seeming working, final code: http://jsfiddle.net/YzD3H/3/

Thanks for the help!

-Avi

[Ricardo Bin]

Surely the directives way is a better approach in your case.

But if you have a large amount of elements, i would recommend mine solution for better performance. :)

[Hattan Shobokshi]

Yes, you are correct in that the TodoMVC example has blur and focus, but as you pointed out those aren't native to angular and are directives that were added by the user.

The focus works by attaching a listener to the expression " item == editedItem "  and through some angular magic, anytime that evaluation changes, a function is called. In that function the focus method is called on the html element. You need to access the element as elem[0] to get the raw html element.

In any case, this has been an interesting discussion and I think I understand directives a little better now :)

[Avi Marcus]

Just a follow up.. http://jsfiddle.net/YzD3H/9/ has the instructions renamed ("double-click") and also has an add element feature. (I had to put text into it, though, not sure why I couldn't simple push an empty element and specify placeholder text in the form.)

And to answer the IRC question of accessibility, here's a vanilla CSS version of hiding the input box borders: http://jsfiddle.net/YzD3H/8/

The main difference is.. if your text overflows the box, in the angular version on-blur you see the entire text. The pure input box can't show you something bigger than itself without an auto-resize function. (of which there are several for textareas in jquery, https://github.com/theproductguy/BetterGrow seems to be a configurable one.)

-Avi