js STUDIO

ngClass

概要

ngClassは、追加される全てのクラスを表す式をデータバインディングすることによって、 動的にHTML要素に対してCSS用のクラスの設定を可能にしてくれます。

もし、既に該当するクラスが設定されている場合、ディレクティブは重複するようなクラスの追加は行いません。 式が変更された場合、予め追加されていたクラスは削除され、新しいクラスだけが追加されます。

使用方法 

<要素 ng-class="{expression}">
   ...
</要素>

<要素 class="ng-class: {expression};">
   ...
</要素>

アニメーション

add
クラスが要素に適用される直前に発生します。
remove
クラスが要素から削除される直前に発生します。

アニメーションに関する手順の詳細については、$animateを確認してみてください。

引数

引数 説明
ngClass

型：式

評価する式を指定します。 この式の結果は、空白区切りのクラス名の文字列、配列、またはクラス名と真偽値のマップのいずれかにすることが可能です。 マップとする場合は、プロパティ名は値がtrueとなった場合に、CSSクラスとして要素に追加されます。

デモ

下記は、ngClassディレクティブによる基本的な紐付け処理のデモです。 

<!doctype html>
<html ng-app="ngAnimate">
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular-animate.min.js"></script>
  </head>
  <body>
    <input type="button" value="set" ng-click="myVar='my-class'">
    <input type="button" value="clear" ng-click="myVar=''">
    <br>
    <span ng-class="myVar">Sample Text</span>
  </body>
</html>

.my-class-add, .my-class-remove {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}

.my-class,
.my-class-add.my-class-add-active {
  color: red;
  font-size:3em;
}

.my-class-remove.my-class-remove-active {
  font-size:1.0em;
  color:black;
}

it('should check ng-class', function() {
  expect(element('.doc-example-live span').prop('className')).not().
    toMatch(/my-class/);

  using('.doc-example-live').element(':button:first').click();

  expect(element('.doc-example-live span').prop('className')).
    toMatch(/my-class/);

  using('.doc-example-live').element(':button:last').click();

  expect(element('.doc-example-live span').prop('className')).not().
    toMatch(/my-class/);
});

<!doctype html>
<html ng-app="ngAnimate">
  <head>
<style type="text/css">.my-class-add, .my-class-remove {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}

.my-class,
.my-class-add.my-class-add-active {
  color: red;
  font-size:3em;
}

.my-class-remove.my-class-remove-active {
  font-size:1.0em;
  color:black;
}
</style>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular-animate.min.js"></script>
  </head>
  <body>
    <input type="button" value="set" ng-click="myVar='my-class'">
    <input type="button" value="clear" ng-click="myVar=''">
    <br>
    <span ng-class="myVar">Sample Text</span>
  </body>
</html>

ngClassと既存のCSS3 Transitions/Animations

ngClassディレクティブは、ngAnimateCSSネーミング構造に従わない場合でも、CSS3 Transitions/Animationsをサポートします。 そのため、もし、何らかのCSS3 Transition/Animationスタイル(ngAnimateの外側)が要素に設定され、 もしngClassアニメーションがトリガされると、ngClassアニメーションはスキップされ、 ngAnimateが、既存のTransition/Animationを引き取ることが可能になります。 この制限はngClassが、ngAnimateの外側で定義された標準CSS3 Transitions/Animationsで動作するようにしてくれます。

 Back to top

© 2017 Google
Licensed under the Creative Commons Attribution License 3.0.

このページは、ページトップのリンク先のAngularJS公式ドキュメント内のページを翻訳した内容を基に構成されています。 下記の項目を確認し、必要に応じて公式のドキュメントをご確認ください。 もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

  • AngularJSの更新頻度が高いため、元のコンテンツと比べてドキュメントの情報が古くなっている可能性があります。
  • "訳注:"などの断わりを入れた上で、日本人向けの情報やより分かり易くするための追記を行っている事があります。