很好用的Angularjs多选控件 Angular Selector

现在有这么一个需求,实现模糊搜索加多选框,现在很多都有这样的功能,配合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在前端方面,请尽管喷,我也想多一些交流的学习机会,今天是踩坑了,又确实觉得这个插件挺不错,让正在找这类效果的人,能参考这篇找到,不浪费时间,所以分享给大家~

 

请多指教~

posted @ 2017-03-27 15:55  TheJimmy  阅读(3836)  评论(0编辑  收藏  举报