AngularJS のリスト項目に条件付きクラスを効率的に適用するにはどうすればよいですか?

AngularJS での条件付きクラス適用のベスト プラクティス

AngularJS では、要素にクラスを条件付きで適用することは、複数の方法で実現できます。特定のシナリオに基づいて最適なソリューションを検討してみましょう。

シナリオ: 配列が順序なしリストとしてレンダリングされ、インデックス selectedIndex が制御されたリスト項目にクラスを追加したいとします。コントローラーの selectedIndex プロパティによる。

Initialアプローチ:

現在、リスト項目コードを手動で複製し、リスト項目タグの 1 つにクラスを追加しています。この方法は機能しますが、不必要な重複が生じます。

解決策 1: 評価式を含む ng-class ディレクティブ

コントローラーで CSS クラス名を使用する代わりに、次のことができます。式を使用してクラス名を動的に設定します。方法は次のとおりです:

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

注: このアプローチには評価メカニズムが必要であるため、コロンを含む古い構文を使用してください。

解決策 2: ng条件付きオブジェクトを含む -class ディレクティブ

AngularJS は割り当てもサポートしていますng-class ディレクティブのオブジェクトです。各プロパティ名はクラス名を表し、その値によってクラスが適用されるかどうかが決まります。

<li ng-class="{selected: $index==selectedIndex}"></li>

補足:

どちらのソリューションでも同じ結果が得られますが、これらは機能的に同等ではありません。解決策 2 では、モデル プロパティをクラス名にマップし、それらをコントローラー コードから除外できます。これにより、柔軟性が向上し、コードの可読性が向上します。

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