现在有这么一个需求,实现模糊搜索加多选框,现在很多都有这样的功能,配合angularjs+bootstrap更佳,网上找了许多控件
比如ngtagsinput,X-editable,angular-tags等。
但是会发现一个挺蛋疼的"bug"(也许是配置不到位),手输入任意字符 点击旁边空白区域 就会变成标签。
我更倾向于是我配置不到位 但是在ngtagsinput上我找了很久都没找到相关配置参数,最终放弃了,突然想起同事用过一个很不错的多选插件,界面相比以上,更加美观。
请教了一下,是叫Angular Selector(http://indrimuska.github.io/angular-selector/)
配置参数非常简单,很容易就上手了,但是会有一些小问题,还是得注意一下,我就一不小心踩进坑里。
1字段名 默认是 value和label,如果你自定义 就会显示成
当然,是可以自定义的,我没去找,就这样先用;
2格式一定要一样
需要经过一些转换
如果你是一个数组,可以先转换
JSON.stringify(demo)
接着使用全局替换 将例如"Name"替换成label
var regS = new RegExp('Name', "g");
demo = demo.replace(regS, 'label');
最后再转换
JSON.parse(demo)
ps:
1可能有更好的方式,比如从数据源下手,我这里的不一定是效率最高的,欢迎大家讨论讨论啊;
2上面的插件"bug"如果有配置可以解决,也欢迎讨论啊,我觉得这种控件用这么久肯定不会存在这样的问题
3在前端方面,请尽管喷,我也想多一些交流的学习机会,今天是踩坑了,又确实觉得这个插件挺不错,让正在找这类效果的人,能参考这篇找到,不浪费时间,所以分享给大家~
请多指教~