18

次の 2 つのng-class3 項式を 1つに結合しようとしていng-classます (ボタン div の btn-success/danger クラスを介して色と、width-small/medium/wide クラスを介して幅の両方を制御できます)。

<div class="btn" ng-class="(rate > 0) ? 'btn-success' : 'btn-danger'">{{rate}}</div>
<div class="btn" ng-class="(priority == 'low') ? 'width-small' : (priority == 'medium') ? 'width-medium' : 'width-wide'">{{rate}}</div>

以下の行に沿って何かを行うことができることに気づきました。ただし、1.1.5 で利用可能な三項式を利用したいと考えています。

<div class="btn" ng-class="{'btn-success': rate > 0, 'btn-danger': rate <= 0, 'width-small': priority == 'low', 'width-medium': priority == 'medium', 'width-wide': prioity == 'high'}">{{rate}}</div>

式を区切るスペースは機能しませんでした。また、式をカンマで区切ることもできませんでしたng-class

単一の三項式で複数の三項式を使用するかどうか/方法を決定する際にご協力いただきありがとうございますng-class

4

3 に答える 3

29

答えを探している人のために：はい、これは確かに可能ですが、前述のように、読みやすさには疑問があります。

<div ng-class="(conversation.read ? 'read' : 'unread') + ' ' + (conversation.incoming ? 'in' : 'out')"></div>

ngClass のドキュメントから:

ディレクティブは、式が 3 つ以上の型のどれに評価されるかに応じて、3 つの異なる方法で動作します。

  1. 式が文字列に評価される場合、文字列は 1 つ以上のスペースで区切られたクラス名である必要があります。

  2. 式が配列に評価される場合、配列の各要素は、スペースで区切られた 1 つ以上のクラス名である文字列でなければなりません。

  3. 式がオブジェクトに評価される場合、真の値を持つオブジェクトの各キーと値のペアに対して、対応するキーがクラス名として使用されます。

オプション 1 がここに適用されます。

私の理解では、この方法を使用すると2つの時計になり、オブジェクト表記を使用すると4になりますが、これについては間違っている可能性があります。

于 2015-01-29T10:58:26.860 に答える
5

filterを使用した方がよいと思います。rateToClassロジックを保持し、必要なクラス名でレートを変換するフィルターを作成できます。

スコープに rateToClass(rate) 関数を入れることもできますが、それは醜いです。

ビューにロジックを含めることを主張する場合は ng-class、オブジェクトを使用して複数のクラスをサポートします (公式ドキュメントの最初の例の 7 行目を参照)。

<p ng-class="{strike: strike, bold: bold, red: red}">Map Syntax Example</p>

' のようなより複雑な表現を使用できますng-class='{btn-success: rate > 0}。

于 2013-10-24T19:39:12.060 に答える
4

各式をこの配列の項目として配列に入れることで、単一の ng-class ディレクティブに複数の三項式を追加することができます。

例 ：

<div ng-class="[
    expression1 ? 'class1' : 'class2',
    expression2 ? 'class3' : 'class4'
]">
于 2019-07-26T12:17:04.410 に答える