AngularJS の要素に CSS クラスを条件付きで適用するにはどうすればよいですか?

AngularJS を使用した条件付きクラス アプリケーション

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>

ソリューションの比較:

両方のソリューションは同じ結果を達成しますが、機能が異なります:

• ng-class は、プロパティ名がクラス名を表し、プロパティ値がクラスがクラスであるかどうかを決定するオブジェクトを受け入れます。 適用済み。これにより、より複雑なクラス アプリケーション ロジックが可能になります。
• ng:class には、特定のクラス名に評価される式が必要ですが、複数のクラスを条件付きで処理する場合の柔軟性が低くなります。

追加メモ:

この手法を使用して、モデルのプロパティをクラス名にマップすることもできます。 CSS クラスをコントローラー コードから除外します。例:

<li ng-class="{admin:'enabled', moderator:'disabled', '':'hidden'}[user.role]">...</li>

以上がAngularJS の要素に CSS クラスを条件付きで適用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。