web-dev-qa-db-ja.com

角度ng-class if-else式

次のように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がfirstまたはsecondと異なる場合は常にclassCを使用し、各値を指定しないことを意味します。

ありがとうございます。

angularjsng-class
233
Dor Cohen

ネストされたインライン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>

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

487
Jossef Harush

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

<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/

104
DotDotDot

2つの「if」文と、どちらも当てはまらない場合の「else」または「デフォルト」の2つが必要になる状況がありました。

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

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

61
joel.bowen

明らかに ！以下の完全な例でCSSクラス名を返す関数を作ることができます。 enter image description here

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で完全なコードページを参照することができます。例

13
Lewis Hai

どういうわけか、背景画像のあるクラスでは上記の解決策はうまくいきませんでした。私がしたのは私がデフォルトクラス（あなたが他で必要とするもの）を作成しそして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>

P.S：状態にあるクラスはデフォルトのクラス、すなわち！importantとしてマークされたクラスをオーバーライドするはずです。

3
Kazim Homayee

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

//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>
2
Avtandil Kavrelishvili

この問題を回避するには、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クラスにこの追加モデルを使用します。

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