ばかおもちゃ本店:Youtube twitter:@sashimizakana Amazon.co.jpアソシエイト

2015年3月15日日曜日

AngularUI ui-selectの使い方

ui-select?

AngularUIには当初select2を利用するためのui-select2ってのがあったんだけど、そもそもselect2をそのまま利用してるので結構無茶があって、どうしたってあまり整った利用方法が出来るようにはなっていなかった。で、ネイティブでselect2とかselectizeとかみたいなものを実装しようよっていうのがui-selectである。
で、これが出来たことでui-select2は非推奨になってこっちに乗り換えてねって感じなんだけど、サンプルがあんまりなかったりサンプルがまともに動いてなかったり、日本語で使うと微妙に不便な部分があったりするので、使い方をちょこっとだけ書く。

使い方

基本的なサンプル


これ見たらもうだいたい分かるような気がするけど一応説明。
まずui-selectには3つのディレクティブがある。

ui-select

ui-selectは全体の親に当たるselectの部分であとの2つはこれの下位要素として設定する。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のタギングでエンターキー余分に押さなきゃならないとか気持ち悪い部分があってそこを直したりしたいんだけど、それはまた解決策がわかったら書く。