AngularJS BootstrapUIを利用したFilterSelect #Angular

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にセットします。

controller.js

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

テキストボックスに文字を入力するとng-selected-itemsのデータから部分一致でフィルタリングします。

　

フィルタリングしたデータをクリックすることでテキストボックスに補完します。
テキストボックスに入力したデータを取得する場合はng-modelを参照します。

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

controller.js

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

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

controller.js

  $scope.inputError = true;

お知らせ

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