現在有這么一個需求,實現模糊搜索加多選框,現在很多都有這樣的功能,配合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在前端方面,請盡管噴,我也想多一些交流的學習機會,今天是踩坑了,又確實覺得這個插件挺不錯,讓正在找這類效果的人,能參考這篇找到,不浪費時間,所以分享給大家~
請多指教~