web-dev-qa-db-ja.com

AngularJS ngClass条件付き

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 です。

htmlcssangularjs
472
ryanzec

あなたの最初の試みはほぼ正しかった、それは引用符なしでうまくいくはずです。

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

これは plnkr です。

NgClassディレクティブは、trueまたはfalseを評価する任意の式で動作します。Javascript式に少し似ていますが、いくつかの違いはありますが、 here について読むことができます。条件が複雑すぎる場合は、3回目の試行と同じように、truthyまたはfalseyを返す関数を使用できます。

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

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

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の状況ごとに、その行には異なるクラスが使用されます。

215
Abhi

Angular JS この機能をng-class指令で提供します。あなたは条件を入れても条件クラスを割り当てることができます。これを実現するには2つの方法があります。

タイプ1

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

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

status valueが 0 の場合クラスを適用する one

status valueが 1 の場合、クラスを適用する two

status valueが 2 の場合、クラスを適用する three

タイプ2

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

どのクラスに status の値で適用されるか

status valueが 1またはtrue の場合、class test_yes が追加されます。

status valueが 0またはfalse の場合、クラスを追加します test_no

102
Kaushal Khamar

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

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

または

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

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

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

64
AlikElzin-kilaka

あなたがhtmlクラス属性と省略形if/elseで使用できる簡単な方法があります。それほど複雑にする必要はありません。次の方法を使うだけです。

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

ハッピーコーディング、Nimantha Perera

43
Nimantha Harshana Perera

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が適用されます。そして動的なクラス変更はそれでうまくいくでしょう。

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

35
Subhransu

Angular構文は、 ： 修飾子と同等の機能を実行するために ： 演算子を使用することです。

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

偶数行にclearfixクラスを追加してください。それにもかかわらず、表現は私たちが正常ならば私たちが持つことができるものなら何でもありえ、それは真か偽のどちらかに評価されるべきです。

33
aamir sajjad

Ng-classでfunctionを使用することは、適切な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 ";
  }     
}
14
Razan Paul

これを使って

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

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

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

Angular 2の場合は、これを使用します。

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

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

三項演算子を使用すると、式がtrueの場合とfalseの場合の2つの異なるクラスを指定するために、速記を使用できます。三項演算子の基本的な構文は次のとおりです。

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>
1
Vinit Solanki