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

AngularJS での条件付きクラス アプリケーションの実装

問題:

順序なしリストとしての配列。特定のインデックスに要素が必要です。カスタムクラスを表示します。これを効率的に達成するにはどうすればよいでしょうか?

解決策:

条件に基づいてクラスを動的に適用するには、いくつかの方法があります:

• での式の使用ngClass:

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

  この古典的なアプローチは、ブール値を直接評価し、インデックスが selectedIndex プロパティと一致する場合に「selected」クラスを割り当てます。

• オブジェクト式の使用ngClass:

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

  AngularJS では、オブジェクト式に基づいたクラス割り当てが可能になりました。各プロパティ名はクラスを表し、その値によってその存在が決まります。

• モデル プロパティのクラスへのマッピング:

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

  この高度なアプローチモデルのプロパティをクラス名にマップし、依存せずに任意の条件に基づいてクラスを割り当てる柔軟性を提供します。 ngIf/ngHide.

アプローチの選択は、コード構造とメンテナンスに関する特定の要件と好みによって決まることに注意してください。

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