在自动完成/打字头部件中添加按钮

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

最后在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()); 
});