リッチな入力フォーム作成に役立つAngularJSライブラリ 5連発

AngularJSアプリ開発を支援する便利モジュール 第2回

伸縮するテキストエリアを作成したい - Angular Elastic

　Angular Elasticを利用することで、入力した行数に応じて高さが変化するテキストエリアを実装できます。スマホなどのタッチデバイスでは、テキストエリアのスクロール操作はまどろっこしく感じるものですが、テキストエリアを伸縮させることでそもそもスクロールバーの操作が不要になります。

入力したテキスト量に応じてテキストエリアを伸縮

　Angular Elasticは、Bowerを利用することで、以下のコマンドでインストールできます。

> bower install angular-elastic

　では、具体的な実装例を見ていきます。

リスト4　elastic.html

<!--（1）Angular Elasticをインポート-->
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-elastic/elastic.js"></script>
<script src="scripts/elastic.js"></script>
...中略...
<form>
  <!--（3）テキストエリアの伸縮を有効化-->
  <textarea msd-elastic ng-model="memo" rows="5" cols="80"></textarea>
</form>

リスト5　elastic.js

// （2）monospaced.elasticモジュールへの依存関係を宣言
angular.module('myApp', ['monospaced.elastic'])
  .controller('MyController', ['$scope', function($scope) {
  }]);

　利用方法はあまり特筆すべき点はありません。ライブラリをインポートし（1）、依存関係を設定することで（2）、Angular Elasticが有効になりますので、あとは目的のテキストエリアに対して、msd-elastic属性を付与するだけです（3）。

　なお、msd-elastic属性に「msd-elastic="\n"」のように値を与えることで、テキストエリアの下部に常に一行空くようにテキストエリアが伸縮します。同様に「\n\n」とすれば複数行空けることも可能です。

スライダーを実装したい - Angular Slider

　スライダーは、ある特定範囲の連続した数値を指定するのに便利なUIです。Angular Sliderを利用することで、基本的なスライダーから2値の範囲を表す範囲スライダーまでを簡単に作成できます。

基本的なスライダーと範囲スライダー

　Angular Sliderは、Bowerを利用することで、以下のコマンドでインストールできます。

> bower install angular-slider

　では、具体的な実装コードを見ていきます。

リスト6　slider.html

<!--（1）Angular SliderのJavaScriptコードとスタイルシートをインポート-->
<link rel="stylesheet" href="bower_components/angular-slider/slider.css" />
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-slider/slider.js"></script>
<script src="scripts/slider.js"></script>
...中略...
<form>
  <!--（3）スライダーを配置-->
  <slider floor="0" ceiling="100" step="2" ng-model="current">
  </slider>
</form>

リスト7　slider.js

// （2）ui.sliderモジュールへの依存関係を宣言
angular.module('myApp', ['ui.slider'])
  .controller('MyController', function($scope) {
    $scope.current = 20;
  });

　Angular Sliderの動作にはJavaScriptライブラリ（slider.js）だけでなく、スタイルシート（slider.css）のインポートも必要です（1）。あとは、ui.sliderモジュールへの依存関係を宣言した上で（2）、<slider>要素でスライダーを配置します（3）。

　<slider>要素で利用可能な属性には、以下のようなものがあります

<

属性	概要	デフォルト値
ng-model	スライダーの値を格納するための変数	（必須）
floor	スライダーの最小値	（必須）
ceiling	スライダーの最大値	（必須）
step	スライダー値の増減値	1
precision	小数点以下の桁数	0

　範囲スライダーを設置する場合には、ng-model属性の代わりに、ng-model-low（下限）／ng-model-high（上限）属性で、上限下限の値を管理します。以下の例では、範囲の下限上限は、変数lower／higherに反映されます。

リスト8　slider.html

<slider floor="0" ceiling="100" step="2"
  ng-model-low="lower" ng-model-high="higher"></slider>