AngularJS TIPS
要素のスタイルプロパティを操作するには？（ng-style）
ng-styleディレクティブを使って、要素のスタイル（style属性）を設定・変更する方法を説明する。
要素のスタイルプロパティを操作するには、ng-styleディレクティブを利用します。例えば以下は、ラジオボタンの選択に応じて、テキスト領域のスタイルを変更する例です。
|
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>
<body ng-controller="MyController">
<form>
<label><input id="style1" name="style" type="radio"
ng-click="myProp={ color: '#000', backgroundColor: '#fff' }" />
ノーマル</label>
<label><input id="style2" name="style" type="radio"
ng-click="myProp={ color: '#f00', backgroundColor: '#ffc' }" />
暖色</label>
<label><input id="style3" name="style" type="radio"
ng-click="myProp={ color: '#00f', backgroundColor: '#cff' }" />
寒色</label>
</form>
<div ng-style="myProp">
要素のスタイルプロパティを操作するには...
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script>
angular.module('myApp', [])
.controller('MyController', ['$scope', function($scope) {
}]);
</script>
</body>
</html>
|
［暖色］から［寒色］に選択を切り替えると...
ng-styleディレクティブには「スタイルプロパティ: 値」のハッシュ形式で、スタイル情報を渡すことで、「style="color: rgb(0, 0, 255); background-color: rgb(204, 255, 255);"」のような属性に変換します。ハッシュに渡す場合、スタイルプロパティは（background-colorのようなハイフン形式ではなく）backgroundColorのようなcamelCase形式で指定します*1。
- *1 ハイフンはJavaScriptの識別子として利用できないからです。プロパティ名をクォート（
'）でくくった場合には、ハイフン形式のままでも構いません。
この例では、ラジオボタンのng-clickディレクティブを使って、ラジオボタンがクリックされたタイミングで、ハッシュmyPropの値を変更しています。myPropは<div>要素のng-styleディレクティブにひも付いていますので、ラジオボタンの選択によって、スタイルが変化するというわけです。
処理対象：ディレクティブ（Directive） カテゴリ：基本
API：ngStyle（ng-style）｜ngClick（ng-click） カテゴリ：ng（コアモジュール） > directive（ディレクティブ）
※以下では、本稿の前後を合わせて5回分（第27回～第31回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
29. 【現在、表示中】≫ 要素のスタイルプロパティを操作するには？（ng-style）
ng-styleディレクティブを使って、要素のスタイル（style属性）を設定・変更する方法を説明する。
30. 要素のスタイルクラスを操作するには？（ng-class）
スタイル定義をスタイルシートに分離したうえで、ng-classディレクティブを使って要素のクラス属性によりスタイルを設定・変更する方法を説明する。
31. 交互に異なるスタイルクラスを適用するには？（ng-class-odd／ng-class-even）
ng-class-even／ng-class-oddディレクティブを使って、表の行などの繰り返しデータの偶数行もしくは奇数行に対し、スタイルを設定・変更する方法を説明する。
