伸縮するテキストエリアを作成したい - Angular Elastic
Angular Elasticを利用することで、入力した行数に応じて高さが変化するテキストエリアを実装できます。スマホなどのタッチデバイスでは、テキストエリアのスクロール操作はまどろっこしく感じるものですが、テキストエリアを伸縮させることでそもそもスクロールバーの操作が不要になります。
Angular Elasticは、Bowerを利用することで、以下のコマンドでインストールできます。
> bower install angular-elastic
では、具体的な実装例を見ていきます。
<!--（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>
// （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
では、具体的な実装コードを見ていきます。
<!--（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>
// （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に反映されます。
<slider floor="0" ceiling="100" step="2" ng-model-low="lower" ng-model-high="higher"></slider>
