AngularJS

AngularJS BootstrapUIを利用したFilterSelect

More than 3 years have passed since last update.

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

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


概要

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

※vtFilterSelectイメージ

スクリーンショット 2014-11-19 18.39.12.png


必要なライブラリ(推奨バージョン)

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のデータから部分一致でフィルタリングします。

スクリーンショット 2014-11-21 14.22.24.png

 

フィルタリングしたデータをクリックすることでテキストボックスに補完します。

テキストボックスに入力したデータを取得する場合はng-modelを参照します。

スクリーンショット 2014-11-21 14.23.10.png

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


controller.js

  $scope.selectedEvent = function(){

// 選択後のイベント処理
alert('選択完了');
}

 

エラーフラグはformで使用する場合に役立ちます。

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


controller.js

  $scope.inputError = true;


スクリーンショット 2014-11-21 14.32.34.png


お知らせ

12月10日(水)19:30からセミナーを開催します。

AngularJSとReflexWorksで始めるSPA開発 ~もうサーバー側で悩まなくて大丈夫~

AngularJSを利用したサーバー通信の方法等、興味持たれた方は是非気軽にご参加ください。