HTML: Making link editable

Question

I have an angular page that I display a series of links on from a list. Here's the HTML/Angular code:

<li role="menuitem"
    ng-repeat="foo in foos track by $index"
    ng-click="selectFoo(foo)">
    <a href="#">
        {{foo}}
        <span class="glyphicon glyphicon-pencil pull-right"></span>
    </a>
</li>

I want the user to be able to edit the display name of foo by clicking on the glyphicon. I could do this pretty easily by adding an ng-click component to the <span> and opening up a modal with a text input etc etc.

But I want to do it in a more streamlined manner. Is it possible to have the glyphicon click change the link into a text input where the user can type something, hit enter and finish editing. I don't want to make the <a> into a text input because clicking on it does another action. Is there any way to achieve what I want?

Answer 1

You could use AngularJS to switch between showing {{foo}} and showing an <input> that is binded to foo :

<li role="menuitem"
    ng-repeat="foo in foos track by $index">
  <span data-ng-hide="foo.isEditing" data-ng-model="foo"></span>
  <input type="text" data-ng-show="foo.isEditing" data-ng-model="foo">
  <a data-ng-click="foo.isEditing = !foo.isEditing" href="#">
    <span class="glyphicon glyphicon-pencil pull-right"></span>
  </a>
</li>

So when a user clicks the glyphicon then it should toggle the state of foo.isEditing from false to true or vice-versa. Both span and input are binded to foo via ng-model so updates to foo happen instantaneously. Let me know if this works out for ya, cheers!

Answer 2

Setting the contentEditable property on your targeted span element should be the simplest solution one may desire. eg:

<span class="glyphicon glyphicon-pencil pull-right" contentEditable="true"></span>

Also, controlling it (most probably by implementing an on/off toggle ) through your script, would be as easy.