在autocomplete / typeahead小部件中添加按钮

Question

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

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

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

感谢。

Answer 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>');
    }
});

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

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

最后在点击时event handlers和edit控件注册其他一些delete：

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