在自动完成/预先输入小部件中添加按钮答案

【问题标题】：Add buttons in autocomplete/typeahead widget在自动完成/预先输入小部件中添加按钮
【发布时间】：2015-09-04 18:18:30
【问题描述】：

我正在使用 angular 和 angular-bootstrap。我需要添加按钮来删除/编辑显示的自动完成功能。

如上图所示，我需要通过发出后端请求来获取要从主列表中删除的编辑/删除按钮。 Angular-bootstrap 没有提供任何选项，我在 ui-bootstrap.tpl.js 中添加了代码来获得这个功能。

有什么干净的方法可以做到这一点吗？如果您遇到任何组件，请提及任何组件。

谢谢。

【问题讨论】：

在您的问题中分享/复制您的代码。

标签： javascript jquery angularjs twitter-bootstrap

【解决方案1】：

我创建了这个 JSFiddle example 来为您提供最终解决方案的想法。

您需要注册一些event handlers来为每个项目添加控件，如下所示：

$(document).on('mouseover', 'ul.dropdown-menu li', function(){
    if ($(this).find('span').length == 0) {
        // Append EDIT and DELETE controls (span tags)
        $(this).append('<span class="custom-control edit">E</span>');
        $(this).append('<span class="custom-control delete">D</span>');
    }
});

使用此css 代码处理活动项目的edit 和delete 控件的可见性：

ul.dropdown-menu li.active span {
    display: block;
}

最后为edit和delete控件注册一些其他event handlers，当它们被点击时：

$(document).on('click', 'span.edit', function(e){
    alert('EDIT: ' + $(this).closest('li').find('a').text());
});

$(document).on('click', 'span.delete', function(e){
    alert('DELETE: ' + $(this).closest('li').find('a').text());
});

【讨论】：

感谢您的解决方案，但我们已经有了这种 jquery 实现方式，但我希望它是纯粹的角度小部件。