AngularJs：NG-クラス

Question

の三事業における-Add複数の条件は、私は、以下

は私がしようとしているコード..です NG-クラス属性に条件式が真であるとき、複数のクラスを統合したいです

<div class="col-md-4" ng-mouseover="hoverButton=true" id="plain_text" ng-class="$state.current.name==='home' && 'hoverButton' ? 'tint,btn-white,panel_hover_font' : 'sd'" style="border: 1px solid;min-height: 300px;"> 

条件がtrueの場合、tint,btn-white,panel_hover_fontを統合することはできません。これはどのように達成できますか？

Answer 1

あなたは三項演算子でそれを行うことができるかどうかは分かりませんが、あなたは、単純な条件演算子でそれを行うことができます：私は、実際のプロジェクトでこれを使用していますし、それが働いている

<span ng-class="{'a set of classes': condition.isTrue, 'another set of classes': condition.isFalse }"> </span> 

。

ng-class="$state.current.name === 'home' && hoverButton ? 'tint btn-white panel_hover_font' : 'sd'" 

はまた、私はhoverButtonは変数ではなく、文字列'hoverButton'であると仮定します。あなたのケースではないカンマ、以下

<div class="col-md-4" ng-mouseover="hoverButton=true" id="plain_text" ng-class="{ 'tint btn-white panel_hover_font': ($state.current.name==='home' && 'hoverButton'), 'sd': !($state.current.name==='home' && 'hoverButton') } " style="border: 1px solid; min-height: 300px;"> 

Answer 2

複数のCSSクラスをスペースで区切って与えるだろう。

Answer 3

は、あなたが、私はテスト目的のためにいくつかのCSSクラスを作っng-class="'hoverButton' ? 'red, anotherclass, another' : 'white'"

ng-class="hoverButton ? 'red anotherclass another' : 'white'"に変更する必要がthis fiddle

を参照してください。