AngularJS BootstrapUIを利用したFilterSelect

AngularJS Advent Calendar 2014 の2日目の記事です。

この記事はAngularJS初心者が、AngularJSへの理解を深めるために書いた記事です。

概要

ある案件で、入力したデータからマスタデータを検索し入力補完するような、テキストボックスとセレクトボックスが一体となったDirectiveを作成する機会があったのでここにサンプルとして紹介します。

※vtFilterSelectイメージ

必要なライブラリ（推奨バージョン）

AngularJS：1.2.6
JQuery：1.11.1
JQuery UI：1.11.0
Bootstrap：3.1.1
AngularJS Bootstrap UI：0.11.0

※ 前後のバージョンでも動作するかもしれませんがテストしていないので保証致しません。

プロジェクトとデモ

Github
Demo

使い方

以下のオプションを用意しています。

view.html

  <vt-filter-select ng-model="inputData" ng-selected-items="inputList" ng-selected-callback="selectedEvent()" ng-is-error="inputError"></vt-filter-select>
```

* ng-model: 入力参照オブジェクト
* ng-selected-items: 一覧オブジェクト
* ng-is-error: エラーフラグ
* ng-selected-callback: 一覧選択後のイベントのコールバック

セレクトボックスと同じように一覧データを用意します。それを`ng-selected-items`にセットします。


````lang:controller.js
  $scope.inputList = [
    {name: 'hoge'},
    {name: 'foo'},
    {name: 'bar'}
  ];
```
　

テキストボックスに文字を入力すると`ng-selected-items`のデータから部分一致でフィルタリングします。
![スクリーンショット 2014-11-21 14.22.24.png](https://qiita-image-store.s3.amazonaws.com/0/59710/447110f3-e789-500e-b702-6fda24a415d0.png)
　

フィルタリングしたデータをクリックすることでテキストボックスに補完します。
テキストボックスに入力したデータを取得する場合は`ng-model`を参照します。
![スクリーンショット 2014-11-21 14.23.10.png](https://qiita-image-store.s3.amazonaws.com/0/59710/1221bc4b-8408-6755-dd84-89e212235b36.png)



補完後に何かイベントを起こしたい場合は、`ng-selected-callback`にfunction関数を設定します。

```lang:controller.js
  $scope.selectedEvent = function(){
      // 選択後のイベント処理
      alert('選択完了');
  }
```

　

エラーフラグはformで使用する場合に役立ちます。
バリデーションエラーの場合、間違っているvtFilterSelectのエラーフラグを`true`にすることで赤く表示できます。

```lang:controller.js
  $scope.inputError = true;
```

![スクリーンショット 2014-11-21 14.32.34.png](https://qiita-image-store.s3.amazonaws.com/0/59710/69005d70-3c6b-1b23-e557-bcfb501b4e1f.png)


## お知らせ
12月10日（水）19:30からセミナーを開催します。
[AngularJSとReflexWorksで始めるSPA開発 ～もうサーバー側で悩まなくて大丈夫～](http://acrovision.connpass.com/event/9957/)
AngularJSを利用したサーバー通信の方法等、興味持たれた方は是非気軽にご参加ください。