HTML：使链接可编辑

我有一个角度页面，我从列表中显示一系列链接。这里的HTML /角码：HTML：使链接可编辑

<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组件并打开一个带有文本输入的模式等等。

但是我想以更简化的方式做到这一点。是否有可能让图形点击将链接更改为文本输入，用户可以键入内容，点击回车并完成编辑。我不想让<a>成为文本输入，因为点击它会执行另一个操作。有什么方法可以实现我想要的吗？

来源

2016-05-09 Richard

你可以使用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>

所以，当用户点击那么就应该从false切换的foo.isEditing的状态true或反之亦然。 span和input都通过ng-model绑定到foo，因此更新为foo瞬间发生。让我知道这是否适合你，欢呼！

来源

2016-05-09 00:37:48 ManBearPixel

我尝试了这一点，但这是射击li元素的点击功能，即使我以为直接点击了glyphicon元素。任何方式来定义点击区域。 – Richard

您需要从'li'元素中删除'ng-click'，因为它将click事件绑定到整个元素的空间。如果你需要在某个地方绑定该点击事件，可以将它绑定到''元素，所以如果用户点击文本，则会触发点击。 – ManBearPixel

设置你的目标跨度元素的CONTENTEDITABLE属性应该是一个可能需要最简单的解决方案。例如： -

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

另外，控制它（最有可能通过实现开/关切换）通过你的脚本，会那么容易。

来源

2016-05-09 02:54:25

HTML：使链接可编辑

回答

相关问题