Works by

Works by

プログラミング等IT技術関連でメモする

【AngularJS】ng-classで動的にhtmlタグのclassを変更する

ng-class

AngularJSではHTMLタグに付加するクラスを動的に変化させるng-classディレクティブが用意されています。
タグに割り当てるクラスを状態や条件で変更できるので、非常に便利です。

使い方

<div ng-class=" <割り当てるクラス名1> : <条件1> , <割り当てるクラス名2> : <条件2> , ...  "></div>

ng-classで割り当てたいクラスと条件は上記のように複数指定できます。

例えば、チェックボックスが有効かどうかを真偽値で返すisBoxChecked()がfalseのときはdisabledをつけたい場合は

<div ng-class=" disabled : isBoxChecked()  "></div>

となります。