HTML: Link editierbar machen

Question

Ich habe eine eckige Seite, die ich eine Reihe von Links aus einer Liste anzeigen. Hier ist der HTML/Schräg 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> 

Ich möchte der Benutzer durch Klicken auf die glyphicon den Anzeigenamen foo in der Lage sein zu bearbeiten. Ich könnte das ziemlich leicht tun, indem ich eine ng-click Komponente der <span> hinzufüge und ein modales mit einer Texteingabe usw. öffne.

Aber ich will es in einer stromlinienförmigeren Art tun. Ist es möglich, den Glyphon-Klick zu aktivieren, ändern Sie den Link in eine Texteingabe, in der der Benutzer etwas eingeben kann, drücken Sie Enter und beende die Bearbeitung. Ich möchte nicht die <a> in eine Texteingabe machen, weil das Klicken auf es eine andere Handlung tut. Gibt es eine Möglichkeit zu erreichen, was ich will?

Answer 1

Sie AngularJS verwenden könnte {{foo}} und zeigt einen <input> zum Umschalten zwischen zeigt, die zu foo binded ist:

<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> 

Also, wenn ein Benutzer klickt auf die glyphicon dann sollte es den Zustand der foo.isEditing von false zu true wechseln oder und umgekehrt. Sowohl span als auch input werden über ng-model an foo gebunden, so dass Aktualisierungen sofort auf foo erfolgen. Lass es mich wissen, wenn dir das gelingt, Prost!

Answer 2

Einstellen der contentEditable Eigenschaft auf Ihre gezielte Spanne Element sollte die einfachste Lösung sein, ein wünschen. z.B .:

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

Auch sie Steuern (höchstwahrscheinlich durch einen Ein/Aus Toggle-Implementierung) durch das Skript, würde so einfach sein.