AngularJS ngClass 条件文を理解する
AngularJS では、ngClass ディレクティブは、提供されたオブジェクトの評価に基づいて CSS クラスを条件付きで適用するためによく使用されます。表現。この機能は単純ですが、考慮すべき点がいくつかあります。
ngClass の条件式
ngClass で条件式を作成するには、次の構文を使用するだけです。
1 |
|
ただし、式は true または に評価される必要があることに注意することが重要です。 falsey 値。引用符は必要ありません。したがって、次のコードは機能しません:
1 |
|
代わりに、次のコードを使用してください:
1 |
|
式が true と評価された場合、テスト クラスが要素に適用されます。それ以外の場合は適用されません。
複雑な式
単純な比較を使用して表現できない複雑な条件については、真のまたはを返す関数を使用できます。 falsey value.
1 |
|
1 2 3 |
|
条件付きカスタム ディレクティブ式
制限関数とコンパイル関数を使用して、条件式をサポートするカスタム ディレクティブを作成することもできます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
結論
使用条件式を含む ngClass では、AngularJS で式がどのように評価されるかを理解する必要があります。真の値と偽の値を受け入れ、複雑な条件に関数を利用することで、動的な基準に基づいて CSS クラスを効果的に適用できます。
以上が条件式で AngularJS ngClass を効果的に使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。