ui-select?
AngularUIã«ã¯å½åselect2ãå©ç¨ããããã®ui-select2ã£ã¦ã®ããã£ããã ãã©、ããããselect2ããã®ã¾ã¾å©ç¨ãã¦ãã®ã§çµæ§ç¡è¶ããã£ã¦、ã©ãããã£ã¦ãã¾ãæ´ã£ãå©ç¨æ¹æ³ãåºæ¥ãããã«ã¯ãªã£ã¦ããªãã£ã。ã§、ãã¤ãã£ãã§select2ã¨ãselectizeã¨ãã¿ãããªãã®ãå®è£ ããããã£ã¦ããã®ãui-selectã§ãã。ã§、ãããåºæ¥ããã¨ã§ui-select2ã¯éæ¨å¥¨ã«ãªã£ã¦ãã£ã¡ã«ä¹ãæãã¦ãã£ã¦æããªãã ãã©、ãµã³ãã«ãããã¾ããªãã£ãããµã³ãã«ãã¾ã¨ãã«åãã¦ãªãã£ãã、æ¥æ¬èªã§ä½¿ãã¨å¾®å¦ã«ä¸ä¾¿ãªé¨åããã£ããããã®ã§、使ãæ¹ãã¡ããã£ã¨ã ãæ¸ã。
使ãæ¹
åºæ¬çãªãµã³ãã«。ããè¦ããããã ãããåãããããªæ°ããããã©ä¸å¿èª¬æ。
ã¾ãui-selectã«ã¯ï¼ã¤ã®ãã£ã¬ã¯ãã£ãããã。
ui-select
ui-selectã¯å ¨ä½ã®è¦ªã«å½ããselectã®é¨åã§ãã¨ã®ï¼ã¤ã¯ããã®ä¸ä½è¦ç´ ã¨ãã¦è¨å®ãã。ng-modelã§é¸æçµæãè¨å®ãã。ãã®ã¨ãng-modelã«è¨å®ããã®$scopeç´ä¸ã®è¦ç´ ã ã¨ãã£ã¬ã¯ãã£ãã®scopeã¨åé¢ãã¦ããããã§æ´æ°ã§ããªãã®ã§、ãµã³ãã«ã®ããã«ã³ã³ããã¼ã©ã¼ã®this以ä¸ã®è¦ç´ ã«ããã、scopeã«ãªãã¸ã§ã¯ãã渡ãã¦ãã®ããããã£ã渡ãå¿ è¦ããã。multipleå±æ§ãè¨å®ããã°è¤æ°é¸æã«ãªã、taggingã«ããã°é¸æè¢è¿½å å¯è½ã«ãªã(å¾è¿°)。ãã¨themeã¨ããã¢ããªãã¥ã¼ãã«bootstrap,select2,selectizeã¨ããæåã§ãã¼ãã決ãããã。ããã«ã¤ãã¦ã¯、ãããã対å¿ããã©ã¤ãã©ãªã®cssãèªã¿è¾¼ãã§ããå¿ è¦ããã。
ui-select-match
ui-select-matchã¯ãããå¾ã®é¸æçµæã®è¡¨ç¤ºã«é¢ãããã£ã¬ã¯ãã£ãã§、ããã®è¨è¿°å 容ã§é¸æããã¦ããã¨ãã®è¡¨ç¤ºãè¨å®ã§ãã。ãã¨ãã°ãã«ãã¦ã³ã«ã¯ãããã詳細ã表示ãã¦ããã¦、çµæã¨ãã¦è¡¨ç¤ºããã¨ãã¯IDã®ã¿åºãã¦ããã¨ãããããªãã¨ãåºæ¥ã。åä¸é¸æã¨è¤æ°é¸æã®ã¨ãã§çµæã®å¤æ°åãéã。åä¸é¸æã®å ´å、$select.selectedã¨ããã®ãé¸æããã¦ãã対象ã§、è¤æ°é¸æã®å ´å、$itemã¨ããã®ãé¸æçµæã®ãã¡ã®ä¸ä»¶åã«ããã。
ui-select-choices
ãã«ãã¦ã³ã®è¡¨ç¤ºã¨é¸æåè£ã®è¨å®ãè¡ã。repeatã¨ããã¢ããªãã¥ã¼ãã«ng-repeatã¨åããããªè¨æ³ã§é¸æè¢ãè¨å®ãã。表示å 容ã¯ãã£ã¬ã¯ãã£ãã®åè¦ç´ ã¨ãã¦{{item.name}}ã¿ãããªæãã§è¨å®ãã。ãã«ãã¦ã³ã®çµè¾¼ã¯èªåã§è¡ãããããã§ã¯ãªã、AngularJSã®filterãå©ç¨ãã¦è¡ã。ãµã³ãã«ã ã¨åç´ã«$select.searchã¨ããæ¤ç´¢æ¬ã«å ¥åä¸ã®æååã示ãããããã£ãfilterã«è¨å®ãã¦ãã。ãã¨ãã°ããã«ã«ã¹ã¿ã ãã£ã«ã¿ãè¨å®ãã¦、ç¬èªè¨æ³ã§æ¤ç´¢ããããããªæ¡å¼µãã§ãã(id:nnã¿ããã«æ¸ãããidã ãçµãè¾¼ãã¨ã)。ã¿ã®ã³ã°
ã¿ã®ã³ã°(é¸æè¢ã追å ãã)ã¯、multipleã®æç¡ã«é¢ãããå¯è½ã§ãã。åç´ãªæååãç´æ¥å ¥ã£ã¦ãããããªé åã®å ´åtaggingãå±æ§ã«å ¥ããã ãã§åé¡ãªãã、æ®éãããªãã§ããããªãã¸ã§ã¯ããé¸æè¢ã¨ãã¦å©ç¨ãããããªã¨ãã«ã¯、ãã®ãªãã¸ã§ã¯ãã®çæå¦çãtaggingã«æ¸¡ããªããã°ãªããªã。ã¡ãªã¿ã«ãã®è¡¨è¨ã¯AngularJSã§è¯ãæ¸ããããªng-click=”click()”ã¨ããæãã§ã¯ãªã、tagging=”tagging”ã¨ãããããªå½¢ã«ãªã(ã«ãã³ãå ¥ããªã)。ä½ã£ããªãã¸ã§ã¯ãã¯é¢æ°ããè¿ãã¦ããã¨è¿½å ããã。
以ä¸。ä»ã«Chromeã®ã¿ã®ã³ã°ã§ã¨ã³ã¿ã¼ãã¼ä½åã«æ¼ããªãããªããªãã¨ãæ°æã¡æªãé¨åããã£ã¦ãããç´ãããããããã ãã©、ããã¯ã¾ã解決çãããã£ããæ¸ã。