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的显示名称。我可以通过向ng-click添加<span>组件并打开带文本输入等的模式等来轻松完成此操作。

但我想以更精简的方式做到这一点。是否可以让glyphicon点击将链接更改为文本输入，用户可以在其中键入内容，按Enter键并完成编辑。我不想将<a>变成文本输入，因为单击它会执行另一个操作。有没有办法达到我想要的目的？

Answer 1

您可以使用AngularJS在显示{{foo}}和显示绑定到<input>的{{1}}之间切换：

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>时，它应该将glyphicon的状态从foo.isEditing切换为false，反之亦然。 true和span都通过input绑定到foo，因此ng-model的更新会立即发生。让我知道这是否适合你，干杯！

Answer 2

在目标 span 元素上设置 contentEditable 属性应该是您可能想要的最简单的解决方案。 e.g：

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

此外，通过脚本控制它（最有可能通过实现开/关切换）也很简单。

HTML：使链接可编辑

2 个答案: