Editable HTML element with AngularJS and HTML5 contentEditable attribute
There is a new attribute in HTML5 „contentEditable”. It allows user to edit content of the website elements like „span” or „div”. It might be very useful when you need to make some element editable only in the specific circumstances.
In my TaskRoo project I am using „contentEditable” with AngularJS to make tasks names editable in-place with the double-click.
In this post I will describe how to implement and use AngularJS directive to make HTML element editable in-place. In case you are just looking for solution, you can find complete implementation on plunker:
Lets start with HTML:
Nothing fancy here. JQuery and AngularJS libraries are included.
You can spot the „span” tag with „quick-edit”, „ng-model” and „ng-change” attributes. This „span” element we will make editable on double click.
That’s it. Just replace „someObj” and „save” function with whatever you need.
Try it working in plunkr.