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

AngularJS でクラスを条件付きで適用するためのエレガントなソリューション

要素の配列を表示するとき、ベースの特定の要素を強調表示する必要がある場合があります。ある物件で。 AngularJS では、クラスのこの条件付き適用はいくつかの方法で実現できます。

理想的ではありませんが、簡単な解決策の 1 つは、リスト要素 (li) を手動で複製し、選択した要素に対応するクラスを追加することです。索引。ただし、AngularJS は、このタスクを達成するためのより洗練されたメソッドを提供します。

式ベースのクラス割り当て

selectedIndex インデックスを使用して li にクラスを直接追加するには、次のことができます。 ng-class ディレクティブ内で条件式を使用します:

ng:class="{true:'selected', false:''}[$index==selectedIndex]"

この式は次のいずれかに評価されます。現在のインデックスが selectedIndex と一致する場合は「selected」、そうでない場合は空の文字列。

オブジェクトベースのクラス マッピング

新しい構文を使用すると、以下に基づいてクラスを割り当てることができます。オブジェクトを返す式:

ng-class="{selected: $index==selectedIndex}"

この場合、「selected」プロパティは現在のインデックスが selectedIndex と一致する場合、クラスとして適用されます。

プロパティとクラス名のマッピング

より柔軟なアプローチとして、モデル プロパティをマッピングできます。クラス名に直接指定します:

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

この式は user.role プロパティを使用して、適用するクラスを決定します。たとえば、ユーザーのロールが「admin」の場合、「enabled」クラスが要素に追加されます。

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