Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
AngularJS TIPS

AngularJS TIPS

要素のスタイルプロパティを操作するには?(ng-style)

2015年10月19日

ng-styleディレクティブを使って、要素のスタイル(style属性)を設定・変更する方法を説明する。

  • このエントリーをはてなブックマークに追加

 要素のスタイルプロパティを操作するには、ng-styleディレクティブを利用します。例えば以下は、ラジオボタンの選択に応じて、テキスト領域のスタイルを変更する例です。

HTML
<!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>
要素のスタイルを動的に変更するためのコード(style.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]を参照してください。

AngularJS TIPS
27. 日付/時刻データを整形するには?(date)

dateフィルターを使って、日付/時刻データを任意の書式に変換する方法を説明する。ロケールの指定方法についても解説。

AngularJS TIPS
28. 配列からm~n件目の要素を取り出すには?(limitTo)

limitToフィルターを使って、配列の先頭から指定された件数だけ要素を取り出す方法を説明。応用例としてページング処理を実装する。

AngularJS TIPS
29. 【現在、表示中】≫ 要素のスタイルプロパティを操作するには?(ng-style)

ng-styleディレクティブを使って、要素のスタイル(style属性)を設定・変更する方法を説明する。

AngularJS TIPS
30. 要素のスタイルクラスを操作するには?(ng-class)

スタイル定義をスタイルシートに分離したうえで、ng-classディレクティブを使って要素のクラス属性によりスタイルを設定・変更する方法を説明する。

AngularJS TIPS
31. 交互に異なるスタイルクラスを適用するには?(ng-class-odd/ng-class-even)

ng-class-even/ng-class-oddディレクティブを使って、表の行などの繰り返しデータの偶数行もしくは奇数行に対し、スタイルを設定・変更する方法を説明する。

サイトからのお知らせ

Twitterでつぶやこう!