HTML：使鏈接可編輯

Question

我有一個角度頁面，從列表中顯示一系列鏈接。 這是HTML / Angular代碼：

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

我希望用戶能夠通過單擊glyphicon來編輯foo的顯示名稱。 我可以通過在<span>添加ng-click組件並使用文本輸入等打開模態來輕松實現此目的。

但我想以更簡化的方式來做。 是否有可能讓glyphicon單擊將鏈接更改為文本輸入，用戶可以在其中輸入內容，點擊Enter並完成編輯。 我不想將<a>設為文本輸入，因為單擊它會執行其他操作。 有什么方法可以實現我想要的嗎？

Answer 1

您可以使用AngularJS在顯示{{foo}}和顯示綁定到foo的<input>之間切換：

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

因此，當用戶點擊glyphicon那么就應該切換的狀態foo.isEditing從false到true ，反之亦然。 span和input都通過ng-model綁定到foo ，因此對foo更新會立即發生。 讓我知道這是否行得通，加油！

Answer 2

在目標范圍元素上設置contentEditable屬性應該是人們想要的最簡單的解決方案。 例如：

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

同樣，通過腳本控制它（很可能通過實現on / off toggle）也很容易。