ホームページ >ウェブフロントエンド >CSSチュートリアル >AngularJS の要素に CSS クラスを条件付きで適用するにはどうすればよいですか?
AngularJS では、特定の条件に基づいて要素にクラスを条件付きで適用する必要があるシナリオが発生する場合があります。これを効率的に達成する方法は次のとおりです。
各要素に li タグを持つ ul としてレンダリングされた要素の配列を考えてみましょう。コントローラーに selectedIndex プロパティがあり、対応するインデックスを持つクラスを li に追加したいとします。
1. ng-class の使用:
AngularJS には、式に基づいてクラスを動的に適用できる ng-class ディレクティブが用意されています。 selectedIndex を持つ li に「selected」クラスを条件付きで適用するには、次を使用できます:
<li ng-class="{selected: $index == selectedIndex}">...</li>
2。 ng:class:
(v1 より前の構文)
v1 より前の AngularJS バージョンの場合、次を評価する式で ng:class を使用できます。クラス名に直接指定します。例:
<li ng:class="{true:'selected', false:''}[$index == selectedIndex]">...</li>
両方のソリューションは同じ結果を達成しますが、機能が異なります:
この手法を使用して、モデルのプロパティをクラス名にマップすることもできます。 CSS クラスをコントローラー コードから除外します。例:
<li ng-class="{admin:'enabled', moderator:'disabled', '':'hidden'}[user.role]">...</li>
以上がAngularJS の要素に CSS クラスを条件付きで適用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。