検索機能や複数選択機能の付いた選択ボックスを実装するには？ - UI Select
UI Selectは、以下のような機能を選択ボックスに追加するためのライブラリです。
- 項目の複数選択
- 画像を含んだ選択オプション
- 選択オプションの検索機能
項目数が増えた場合などは、これらの機能を実装することで目的の項目を選択しやすくなるでしょう。
UI Selectは、Bowerを利用することで、以下のコマンドで実行できます。
bower install --save angular-ui-select angular-sanitize
では、具体的な例もみてみましょう。以下は、与えられた書籍情報をもとに、書籍選択のためのリストを生成する例です。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS</title>
<!-- （1）ライブラリとスタイルシートをインポート -->
<link rel="stylesheet" href="bower_components/angular-ui-select/dist/select.css" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">
<link rel="stylesheet" href="css/select.css" />
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-ui-select/dist/select.js"></script>
<script src="scripts/select.js"></script>
</head>
<body ng-controller="MyController">
<form>
<label for="book">書籍：</label>
<!-- （3）選択ボックスを定義 -->
<ui-select id="book" ng-model="book.selected" multiple
close-on-select="false" theme="bootstrap"
style="width: 500px;" ng-change="onchange()">
<!-- （4）入力ボックスに反映するテンプレートを指定 -->
<ui-select-match placeholder="書名を入力してください">
{{$item.title}}</ui-select-match>
<!-- （5）選択リストに各要素を表示するためのテンプレートを指定 -->
<ui-select-choices group-by="'publish'"
repeat="book in books | filter: { title: $select.search }">
<img ng-src="http://www.wings.msn.to/books/{{book.isbn}}/{{book.isbn}}_logo.jpg"
style="height: 30px; width: 50px" />
<div ng-bind-html="book.title | highlight: $select.search"></div>
<small>
（{{book.publish}}／{{book.price | number}}円）
</small>
</ui-select-choices>
</ui-select>
<hr />
<div>{{book.selected | json}}</div>
</form>
</body>
</html>
.ui-select-highlight {
background-color: #0f0;
}
// （2）ngSanitize／ui.selectモジュールへの依存関係を設定
angular.module('myApp', ['ngSanitize', 'ui.select'])
.controller('MyController', ['$scope', function($scope) {
$scope.book = [];
$scope.books = [
{
isbn: '978-4-7981-4469-6',
title: 'Amazon Web Servicesではじめる新米プログラマのためのクラウド超入門',
price: 2980,
publish: '翔泳社',
published: new Date(2016, 5, 17)
},
...中略...
];
}]);
UI Selectは、AngularJS標準のngSanitizeモジュールに依存しています。必要なライブラリとスタイルシートをインポートした上で（1）、メインモジュールからはngSanitize／ui.selectモジュールへの依存関係を設定しておきます（2）。
あとは、以下の要素（ディレクティブ）で選択ボックスのそれぞれの部位を定義するだけです（3）。以下に、それぞれの要素と利用できる属性を指定します。
| 要素 | 概要 | 属性 | 意味 |
|---|---|---|---|
| <ui-select> | 選択ボックスの外枠 | multiple | 複数選択が可能か |
| close-on-select | 選択されたら候補リストを閉じるか | ||
| theme | 表示に利用するテーマ（select2、bootstrap、selectize） | ||
| search-enabled | 検索機能を有効化するか | ||
| on-select | 選択された時に実行すべき処理 | ||
| <ui-select-match> | 選択された値の表示方法 | placeholder | 入力ボックスに表示されるプレイスホルダー |
| <ui-select-choices> | 選択リストの表示テンプレート | repeat | 表示すべき選択オプション（繰り返し式） |
| ui-disable-choice | オプションを無効化する条件（たとえば「book.publish === 翔泳社」） | ||
| group-by | 選択オプションのグループ化キー |
<ui-select-match>要素（4）には、選択されたオブジェクトを入力ボックスに反映する際に利用するテンプレートを、<ui-select-choices>要素（5）には、選択リストで個々の要素を表示するためのテンプレートを、それぞれ指定します。テンプレートの中の$itemは選択されたオブジェクト、$select.searchは検索ボックスに入力された値を表します。
この例では、highlightフィルターを使って、入力値と書名の合致した部分をハイライト表示しています。ただし、highlightフィルターは、合致したテキストを太字にするだけであまり目立たないので、スタイルを追加して背景色が付くようにしています。ハイライト部分には、<span class="ui-select-highlight">要素で括られていますので、これにスタイルを追加します。
まとめ
以上、本稿ではリッチなフォームを生成するために役立つライブラリとして、Angular Wizard、UI Mask、UI Selectについて紹介しました。本連載では、第2回でもフォームのリッチ化に役立つライブラリを紹介していますので、こちらと合わせてアプリ開発に役立ててみてください。
次回は、小粒ながらアプリ開発で使える便利ライブラリとして、UI Layout、ngCSV、Angular Count-toなどを解説の予定です。
参考資料
- 『AngularJSアプリケーションプログラミング』（技術評論社）
-
『AngularJSライブラリ 活用レシピ 厳選 108』（WINGSプロジェクト）
