ng-classコア AngularJs のディレクティブです。「文字列構文」、「配列構文」、「評価式」、「三項演算子」、および以下で説明するその他の多くのオプションを使用できます。
文字列構文を使用したngClass
これは ngClass を使用する最も簡単な方法です。Angular 変数を ng-class に追加するだけで、それがその要素に使用されるクラスになります。
<!-- whatever is typed into this input will be used as the class for the div below -->
<input type="text" ng-model="textType">
<!-- the class will be whatever is typed into the input box above -->
<div ng-class="textType">Look! I'm Words!
文字列構文を使用した ngClassのデモ例
配列構文を使用した ngClass
これは、複数のクラスを適用できることを除いて、文字列構文メソッドに似ています。
<!-- both input boxes below will be classes for the div -->
<input type="text" ng-model="styleOne">
<input type="text" ng-model="styleTwo">
<!-- this div will take on both classes from above -->
<div ng-class="[styleOne, styleTwo]">Look! I'm Words!
評価された式を使用するngClass
ngClass を使用するより高度な方法 (およびおそらく最もよく使用する方法) は、式を評価することです。これが機能する方法は、変数または式が に評価されるtrue場合、特定のクラスを適用できるということです。そうでない場合、クラスは適用されません。
<!-- input box to toggle a variable to true or false -->
<input type="checkbox" ng-model="awesome"> Are You Awesome?
<input type="checkbox" ng-model="giant"> Are You a Giant?
<!-- add the class 'text-success' if the variable 'awesome' is true -->
<div ng-class="{ 'text-success': awesome, 'text-large': giant }">
評価された式を使用した ngClassの例
値を使用するngClass
これは、複数の値を唯一の変数と比較できることを除いて、評価された式の方法に似ています。
<div ng-class="{value1:'class1', value2:'class2'}[condition]"></div>
三項演算子を使用したngClass
三項演算子を使用すると、短縮形を使用して 2 つの異なるクラスを指定できます。1 つは式が true の場合で、もう 1 つは false の場合です。三項演算子の基本的な構文は次のとおりです。
ng-class="$variableToEvaluate ? 'class-if-true' : 'class-if-false'">
最初、最後、または特定の番号の評価
ディレクティブを使用していて、リスト内の、、または特定の番号にngRepeatクラスを適用する場合は、 の特別なプロパティを使用できます。これらには、、、、およびその他のいくつかが含まれます。これらの使用方法の例を次に示します。firstlastngRepeat$first$last$even$odd
<!-- add a class to the first item -->
<ul>
<li ng-class="{ 'text-success': $first }" ng-repeat="item in items">{{ item.name }}</li>
</ul>
<!-- add a class to the last item -->
<ul>
<li ng-class="{ 'text-danger': $last }" ng-repeat="item in items">{{ item.name }}</li>
</ul>
<!-- add a class to the even items and a different class to the odd items -->
<ul>
<li ng-class="{ 'text-info': $even, 'text-danger': $odd }" ng-repeat="item in items">{{ item.name }}</li>
</ul>