ng-class条件付きであることを表現する方法はありますか？

たとえば、私は次のことを試しました：

<span ng-class="{test: 'obj.value1 == \'someothervalue\''}">test</span>

このコードの問題obj.value1は、何であれ、クラステストが常に要素に適用されることです。これを行う：

<span ng-class="{test: obj.value2}">test</span>

obj.value2真の値に等しくない限り、クラスは適用されません。これで、最初の例でこの問題を回避できます。

<span ng-class="{test: checkValue1()}">test</span>

どこcheckValue1の関数は次のようになります。

$scope.checkValue1 = function() {
  return $scope.obj.value === 'somevalue';
}

私はこれがどのように機能するng-classことになっているのか疑問に思っています。これと同様のことをしたいカスタムディレクティブも作成しています。しかし、私は式を見る方法を見つけることができません（そして、多分それは不可能であり、それがこのように機能する理由です）。

ここに私が意味することを示すplnkrがあります。

あなたの最初の試みはほぼ正しかった、それは引用符なしで動作するはずです。

{test: obj.value1 == 'someothervalue'}

これがplnkrです。

ngClassディレクティブは、Javascript式に少し似ていますが、真実または偽を評価する任意の式で機能しますが、いくつかの違いがありますが、ここで読むことができます。条件が複雑すぎる場合は、3回目の試行で行ったように、真または偽を返す関数を使用できます。

補足として：論理演算子を使用して、次のような論理式を作成することもできます。

ng-class="{'test': obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}"

ng-repeat内でng-classを使用する

<table>
    <tbody>
            <tr ng-repeat="task in todos"
                ng-class="{'warning': task.status == 'Hold' , 'success': task.status == 'Completed',
              'active': task.status == 'Started', 'danger': task.status == 'Pending' } ">
                <td>{{$index + 1}}</td>
                <td>{{task.name}}</td>
                <td>{{task.date|date:'yyyy-MM-dd'}}</td>
                <td>{{task.status}}</td>
            </tr>
    </tbody>
</table>

task.statusのステータスごとに、行に異なるクラスが使用されます。

Angular JSは、ng-classディレクティブでこの機能を提供します。条件を設定し、条件付きクラスを割り当てることもできます。これは、2つの異なる方法で実現できます。

タイプ1

<div ng-class="{0:'one', 1:'two',2:'three'}[status]"></div>

このコードでは、クラスはステータス値の値に従って適用されます

場合は、ステータス値は0、クラスの適用1を

場合は、ステータス値は1、クラスに適用2を

場合は、ステータス値は2、クラスに適用3を

タイプ2

<div ng-class="{1:'test_yes', 0:'test_no'}[status]"></div>

ステータスの値によって適用されるクラス

場合は、ステータス値が1または真のそれは、クラスの追加されますtest_yesを

場合は、ステータス値が0またはfalse、それがクラスに追加されますtest_noを

上記のすばらしい例を見てみますが、それらはすべて中括弧（jsonマップ）で始まります。別のオプションは、計算に基づいて結果を返すことです。結果は、CSSクラス名のリストにもなります（マップだけではありません）。例：

ng-class="(status=='active') ? 'enabled' : 'disabled'"

または

ng-class="(status=='active') ? ['enabled'] : ['disabled', 'alik']"

説明：状況がアクティブの場合、クラスenabledが使用されます。それ以外の場合は、クラスdisabledが使用されます。

リスト[]は、1つだけではなく複数のクラスを使用するために使用されます。

htmlクラス属性と省略形if / elseで使用できる簡単なメソッドがあります。それほど複雑にする必要はありません。次の方法を使用してください。

<div class="{{expression == true ? 'class_if_expression_true' : 'class_if_expression_false' }}">Your Content</div>

ハッピーコーディング、ニマンサペレラ

ng-classを動的に適用できる2つの方法を紹介します

ステップ1

三項演算子を使用する

<div ng-class="condition?'class1':'class2'"></div>

出力

条件が真の場合、class1が要素に適用され、そうでない場合、class2が適用されます。

不利益

実行時に条件値を変更しようとすると、クラスはどういうわけか変更されません。したがって、動的クラス変更などの要件がある場合は、ステップ2に進むことをお勧めします。

ステップ2

<div ng-class="{value1:'class1', value2:'class2'}[condition]"></div>

出力

条件がvalue1と一致する場合、class1が要素に適用され、value2と一致する場合、class2が適用されます。そして、動的クラス変更はそれでうまく動作します。

これがお役に立てば幸いです。

角構文は：演算子を使用して、if修飾子と同等の機能を実行します

<div ng-class="{ 'clearfix' : (row % 2) == 0 }">

clearfixクラスを偶数行に追加します。それにもかかわらず、式は通常のif条件で使用できるものであれば何でも可能であり、trueまたはfalseのいずれかに評価する必要があります。

ng-classで関数を使用することは、適切なCSSクラスを決定するために複雑なロジックを実行する必要がある場合に適したオプションです。

http://jsfiddle.net/ms403Ly8/2/

HTML：

<div ng-app>
  <div ng-controller="testCtrl">
        <div ng-class="getCSSClass()">Testing ng-class using function</div>       
    </div>
</div>

CSS：

.testclass { Background: lightBlue}

JavaScript：

function testCtrl($scope) {
    $scope.getCSSClass = function() {
     return "testclass ";
  }     
}

これを使って

<div ng-class="{states}[condition]"></div>

たとえば、条件が[2 == 2]の場合、状態は{true： '...'、false： '...'}です。

<div ng-class="{true: 'ClassA', false: 'ClassB'}[condition]"></div>

Angular 2の場合、これを使用してください

<div [ngClass]="{'active': dashboardComponent.selected_menu == 'mapview'}">Content</div>

ng-classコアAngularJのディレクティブです。「文字列構文」、「配列構文」、「評価された式」、「三項演算子」、および以下で説明するその他の多くのオプションを使用できます。

文字列構文を使用したngClass

これは、ngClassを使用する最も簡単な方法です。Angular変数をng-classに追加するだけで、その要素に使用されるクラスになります。

<!-- whatever is typed into this input will be used as the class for the div below -->
<input type="text" ng-model="textType">

<!-- the class will be whatever is typed into the input box above -->
<div ng-class="textType">Look! I'm Words!

文字列構文を使用したngClassのデモ例

配列構文を使用したngClass

これは、複数のクラスを適用できることを除いて、文字列構文メソッドに似ています。

<!-- both input boxes below will be classes for the div -->
<input type="text" ng-model="styleOne">
<input type="text" ng-model="styleTwo">

<!-- this div will take on both classes from above -->
<div ng-class="[styleOne, styleTwo]">Look! I'm Words!

評価された式を使用したngClass

ngClassを使用するより高度な方法（およびおそらく最もよく使用する方法）は、式を評価することです。これが機能する方法は、変数または式がに評価されるtrue場合、特定のクラスを適用できることです。そうでない場合、クラスは適用されません。

<!-- input box to toggle a variable to true or false -->
<input type="checkbox" ng-model="awesome"> Are You Awesome?
<input type="checkbox" ng-model="giant"> Are You a Giant?

<!-- add the class 'text-success' if the variable 'awesome' is true -->
<div ng-class="{ 'text-success': awesome, 'text-large': giant }">

評価された式を使用したngClassの例

値を使用するngClass

これは、複数の値を唯一の変数と比較できることを除いて、評価された式メソッドに似ています。

<div ng-class="{value1:'class1', value2:'class2'}[condition]"></div>

三項演算子を使用したngClass

三項演算子を使用すると、2つの異なるクラスを指定するために省略表現を使用できます。1つは式が真の場合、もう1つは偽の場合です。三項演算子の基本的な構文は次のとおりです。

ng-class="$variableToEvaluate ? 'class-if-true' : 'class-if-false'">

最初、最後、または特定の数の評価

ngRepeatディレクティブを使用していてfirst、クラスを、、lastまたはリスト内の特定の番号に適用する場合は、の特別なプロパティを使用できますngRepeat。これらには$first、$last、$even、$odd、およびいくつかの他。これらの使用例を以下に示します。

<!-- add a class to the first item -->
<ul>
  <li ng-class="{ 'text-success': $first }" ng-repeat="item in items">{{ item.name }}</li>
</ul>

<!-- add a class to the last item -->
<ul>
  <li ng-class="{ 'text-danger': $last }" ng-repeat="item in items">{{ item.name }}</li>
</ul>

<!-- add a class to the even items and a different class to the odd items -->
<ul>
  <li ng-class="{ 'text-info': $even, 'text-danger': $odd }" ng-repeat="item in items">{{ item.name }}</li>
</ul>