web-dev-qa-db-ja.com

複雑なangular js ng-class

コンポーネントがあり、CSSクラスの設定に問題があります。私は常に「ボックス」のクラスを持ち、その後、ディレクティブ「class」引数と1つの条件付きクラス「mini」で指定される追加のクラスを持ちたいです。

概念的に私が達成したいのは次のようなものです：

<div class="box {{class}}" data-ng-class="{mini: !isMaximized}">
...
</div>

問題は、クラスのhtml属性を設定すると、ng-class属性が省略されることです。コントローラーを変更せずに私の例を動作させる方法は？それも可能ですか、代わりにコントローラにクラスを設定する必要がありますか？

angularjsng-class
38
Szymon Wygnański

1つは$ scopeから派生し、他はリテラルクラスである複数のクラスが必要でした。アンドレからのヒントのおかげで、以下は私のために働いた。

<h2 class="{{workStream.LatestBuildStatus}}" 
    ng-class="{'expandedIcon':workStream.isVisible,  'collapsedIcon':!workstream.isvisible}">{{workStream.Name}}</h2>
12
Nitin Arora

簡単な解決策は、ng-class属性内にボックスクラスを定義することです。

<div data-ng-class="{mini: !isMaximized, box: true}"></div>

スコープ変数をクラスとして含める場合、ng-classは使用できません。

<div class="{{class}} box {{!isMaximized && 'mini' || ''}}">

角度式は三項演算子をサポートしていませんが、次のようにエミュレートできます：

条件&&（trueの場合回答）|| （偽の場合は回答）

62
Andre Goncalves

編集：Angular Nitins answer 最適なatmを参照）の新しいバージョンの場合

私にとっては、これはうまくいきました（私は現在AngularJS v1.2.14に取り組んでいますので、1.2.X +がこれをサポートするはずで、以前のバージョンについてはわかりません）：

<div class="box" data-ng-class="{ {{myScopedObj.classesToAdd}}: true, mini: !isMaximized }"></div>

{{class}} with {{myScopedObj.classesToAdd}}スコープ変数または少し複雑なオブジェクトでもこの方法で使用できることを示します。

したがって、この方法で作成されたすべてのDIV要素には、「ボックス」クラスと、myScopedObj.classesToAdd（ng-repeatを使用し、配列内のすべての要素に異なるクラスを適用する必要がある場合に役立ちます）、!isMaximized。

4
pootzko

二重中括弧なしでこれを行う別の方法で、スコープ変数が含まれています。angular v1.2 +でテストされています。

<div ng-class="['box', 
                aClass, 
               {true:'large': false: 'mini'}[isMaximized]]"></div>

また、3項を使用して複雑さを増すことなく、変数がさまざまな型をインデックスとして使用できるため、かなり優れています。また、否定の必要性を取り除くことができます;）ここにフィドルリンクがあります

3
denixtry

以下の簡単な式を使用できます

ng-class="{'active' : itemCount, 'activemenu' : showCart}"
2
Vivek Panday