AngularJS ng-class if-else式


257

AngularJS私が使用しているng-class次のように:

<div class="bigIcon" data-ng-click="PickUp()" 
ng-class="{first:'classA', second:'classB', third:'classC', fourth:'classC'}[call.State]"/>

if-else式を使用して次のようなことを実行できるかどうか疑問に思っています。

<div class="bigIcon" data-ng-click="PickUp()" 
ng-class="{first:'classA', second:'classB', else:'classC'}[call.State]"/>

それで、それぞれの値とcall.Stateは異なるfirstsecond使用classCするたびに、それぞれの値を指定しないようにしますか?

回答:


523

ネストされたインラインif-thenステートメントを使用する(3 項演算子

<div ng-class=" ... ? 'class-1' : ( ... ? 'class-2' : 'class-3')">

例えば ​​:

<div ng-class="apt.name.length >= 15 ? 'col-md-12' : (apt.name.length >= 10 ? 'col-md-6' : 'col-md-4')">
    ...
</div>

そして、それがあなたの同僚によって読めることを確認してください :)


2
2つのクラスを追加する必要がある場合はどうなりますか?
mircobabini 2014年

2
すみません、「これならクラスで、それなら別のクラス」という意味です。2つのクラス、2つの異なる条件。
mircobabini 2014年

17
@mircobabini、ng-class="{'class1': ##condition1## , 'class2': ##condition2## }"あなたは上記の質問に見ることができるように
Jossef Harush

2
これは私が見たいものではありません。ビューのロジックが多すぎます。
AturSams 2014年

19
@Zehelvion同意しないといけない。これはビューロジックです。コントローラーまたはサービス内で使用する列クラスを指定する必要はありません。これが本来あるべき場所です。
Nick

108

あなたはそのような関数を使って試すことができます:

<div ng-class='whatClassIsIt(call.State)'>

次に、ロジックを関数自体に配置します。

    $scope.whatClassIsIt= function(someValue){
     if(someValue=="first")
            return "ClassA"
     else if(someValue=="second")
         return "ClassB";
     else
         return "ClassC";
    }

私は例でフィドルを作りました:http : //jsfiddle.net/DotDotDot/nMk6M/


6
これはネストされた3項演算子よりもはるかに優れたソリューションです
デビッドはモニカを

2
大好きです。これにより、htmlは単純なng-class条件よりもさらにクリーンに保たれます。
mrgnw 2014年

17
このアプローチの問題は、コントローラーにCSSクラスを認識させることです。良いアプローチではありません。コントローラーに変数を設定し、その変数からHTMLで使用するクラスを決定することは、より良いソリューションです。
VtoCorleone 2014年

1
これは、それを行う方法のヒントにすぎません。この問題は、三項演算子を処理するのに十分なほど単純でしたが、より多くのロジックが必要な場合、HTMLで直接実行したくない場合、最も速い解決策の1つは、私がしたように、そのためにコントローラーで関数を使用するには(コントローラーにCSSを認識させたくない場合は、スコープ変数を監視および設定し、その値に基づいてHTMLで条件を使用することもできます) )。しかし、もう少しロジックがある、または多くの繰り返しがある場合は、これをディレクティブに入れれば、よりクリーンになるはずです。この例は主に、HTMLにロジックを配置しないことについてでした
DotDotDot

1
2つまたは3つ以上の異なるクラスの条件を追加する必要がある場合は、3項演算子よりも優れています。ロジックでhtmlを区切ります:)
Tho Vo

61

私は2つの「if」ステートメントが必要で、どちらもtrueである場合は「else」またはデフォルトが必要になるという状況がありましたが、これがジョセフの回答の改善であるかどうかはわかりませんが、私にはわかりやすいように見えました。

ng-class="{'class-one' : value.one , 'class-two' : value.two}" class="else-class"

value.oneとvalue.twoがtrueの場合、それらは.else-classよりも優先されます


13

明らかに!次の完全な例を使用して、CSSクラス名を返す関数を作成できます。 ここに画像の説明を入力してください

CSS

<style>
    .Red {
        color: Red;
    }
    .Yellow {
        color: Yellow;
    }
      .Blue {
        color: Blue;
    }
      .Green {
        color: Green;
    }
    .Gray {
        color: Gray;
    }
     .b{
         font-weight: bold;
    }
</style>

JS

<script>
    angular.module('myapp', [])
            .controller('ExampleController', ['$scope', function ($scope) {
                $scope.MyColors = ['It is Red', 'It is Yellow', 'It is Blue', 'It is Green', 'It is Gray'];
                $scope.getClass = function (strValue) {
                    if (strValue == ("It is Red"))
                        return "Red";
                    else if (strValue == ("It is Yellow"))
                        return "Yellow";
                    else if (strValue == ("It is Blue"))
                        return "Blue";
                    else if (strValue == ("It is Green"))
                        return "Green";
                    else if (strValue == ("It is Gray"))
                        return "Gray";
                }
        }]);
</script>

その後

<body ng-app="myapp" ng-controller="ExampleController">

<h2>AngularJS ng-class if example</h2>
<ul >
    <li ng-repeat="icolor in MyColors" >
        <p ng-class="[getClass(icolor), 'b']">{{icolor}}</p>
    </li>
</ul>
<hr/>
<p>Other way using : ng-class="{'class1' : expression1, 'class2' : expression2,'class3':expression2,...}"</p>
<ul>
    <li ng-repeat="icolor in MyColors">
        <p ng-class="{'Red':icolor=='It is Red','Yellow':icolor=='It is Yellow','Blue':icolor=='It is Blue','Green':icolor=='It is Green','Gray':icolor=='It is Gray'}" class="b">{{icolor}}</p>
    </li>
</ul>

例の場合ng-classで完全なコードページを参照できます。


3

上記の解決策は、背景画像のあるクラスではどういうわけか機能しませんでした。私がしたことは、デフォルトクラス(他に必要なクラス)を作成し、class = 'defaultClass'を設定してから、ng-class = "{class1:abc、class2:xyz}"を設定することでした

<span class="booking_warning" ng-class="{ process_success: booking.bookingStatus == 'BOOKING_COMPLETED' || booking.bookingStatus == 'BOOKING_PROCESSED', booking_info: booking.bookingStatus == 'INSTANT_BOOKING_REQUEST_RECEIVED' || booking.bookingStatus == 'BOOKING_PENDING'}"> <strong>{{booking.bookingStatus}}</strong> </span>

PS:状態にあるクラスは、デフォルトクラスをオーバーライドする必要があります(つまり、!importantとしてマークされています)


1

これは、これを行うための最良かつ信頼できる方法です。簡単な例を次に示します。その後、カスタムロジックを開発できます。

//In .ts
public showUploadButton:boolean = false;

if(some logic)
{
    //your logic
    showUploadButton = true;
}

//In template
<button [class]="showUploadButton ? 'btn btn-default': 'btn btn-info'">Upload</button>

0

私の回避策は、ngクラスのトグルのためにモデル変数を操作することです:

たとえば、リストの状態に応じてクラスを切り替えたいと思います。

1)リストが空のときはいつでも、モデルを更新します。

$scope.extract = function(removeItemId) {
    $scope.list= jQuery.grep($scope.list, function(item){return item.id != removeItemId});
    if (!$scope.list.length) {
        $scope.liststate = "empty";
    }
}

2)リストが空でない場合はいつでも、別の状態を設定します

$scope.extract = function(item) {
    $scope.list.push(item);
    $scope.liststate = "notempty";
}

3)リストが変更されていない場合は、別のクラスを提供します(ここからページが開始されます)。

$scope.liststate = "init";

3)ng-classでこの追加モデルを使用します。

ng-class="{'bg-empty': liststate == 'empty', 'bg-notempty': liststate == 'notempty', 'bg-init': liststate = 'init'}"

0

次のように使用します。

    <div [ngClass]="{cssClass A: condition 1, cssClass B: condition 2, cssClass C: condition 3}">...</div>

-3

この方法を試すことができます:

</p><br /><br />
<p>ng-class="{test: obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}<br /><br /><br />

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

詳細はこちらから入手できます

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.