javascript - 在自动完成/提前输入小部件中添加按钮

Question

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

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

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

谢谢。

Answer 1

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

您需要注册一些事件处理程序以将控件添加到每个项目，如下所示:

$(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;
}

最后，为单击时的编辑和删除控件注册一些其他事件处理程序:

$(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());
});