在自动完成/打字头部件中添加按钮
问题描述:
我正在使用角度以及angular-bootstrap。我需要添加按钮来删除/编辑显示的自动完成。在自动完成/打字头部件中添加按钮
正如上面的图片中,我需要得到编辑/删除按钮,通过使后端请求,从主力名单中删除。 Angular-bootstrap不提供任何选项来执行此操作,我在ui-bootstrap.tpl.js中添加了代码以获取此功能。
任何干净的方式来做到这一点? 如果您遇到任何问题,请提及任何组件。
谢谢。
答
我创建了这个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());
});
+0
感谢您的解决方案,但我们已经有了这种jQuery的实现方式,但我希望它是纯粹的角度小部件。 –
在你的问题中分享/复制你的代码。 – Vineet