38

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

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

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

問題は、class html属性を設定すると、ng-class属性が省略されることです。コントローラを変更せずに例を機能させるにはどうすればよいですか？それも可能ですか、それとも代わりにコントローラーでクラスを設定する必要がありますか（これは避けたいです）？

4

5 に答える 5

62

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

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

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

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

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

条件&&（trueの場合は回答）|| （falseの場合は答えてください）

于 2012-11-28T15:05:44.387 に答える
12

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

<h2 class="{{workStream.LatestBuildStatus}}" 
    ng-class="{'expandedIcon':workStream.isVisible,  'collapsedIcon':!workstream.isvisible}">{{workStream.Name}}</h2>
于 2015-02-25T23:40:50.447 に答える
4

編集：Angularの新しいバージョンについては、 Nitinsの回答を参照してください。これは最高のATMです。

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

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

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

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

于 2014-04-08T08:45:10.637 に答える
3

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

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

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

于 2015-05-09T04:03:47.033 に答える
2

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

ng-class="{'active' : itemCount, 'activemenu' : showCart}"
于 2015-06-02T05:16:26.133 に答える