angularjs - AngularJS ng-class if-else expression

Question

With AngularJS I'm using ng-class the following way:

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

I'm wondering if I can use the if-else expression to do something similar to this:

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

So whenever call.State differs from first or second use classC and avoid specifying each value?

score 531 · Accepted Answer

使用嵌套的内联 if-then 语句（三元运算符）

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

并确保您的同事可以阅读它:)

score 111 · Accepted Answer

you could try by using a function like that :

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

Then put your logic in the function itself :

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

I made a fiddle with an example : http://jsfiddle.net/DotDotDot/nMk6M/

score 65 · Accepted Answer

我有一种情况，我需要两个“if”语句，它们都可以为真，如果两者都不为真，则为“else”或默认值，不确定这是否是对 Jossef 答案的改进，但对我来说似乎更干净：

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

当 value.one 和 value.two 为真时，它们优先于 .else-class

score 13 · Accepted Answer

清楚！我们可以通过以下完整示例创建一个函数来返回 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的完整代码页

score 3 · Accepted Answer

上述解决方案对我来说不适用于带有背景图像的课程。我所做的是创建一个默认类（你需要的那个）并设置 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

score 1 · Accepted Answer

这是执行此操作的最佳且可靠的方法。这是一个简单的示例，之后您可以开发自定义逻辑：

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

score 0 · Accepted Answer

以这种方式使用它：

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

score 0 · Accepted Answer

我的一种解决方法是为 ng-class 切换操作模型变量：

例如，我想根据列表的状态切换类：

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'}"

score -3 · Accepted Answer

你可以试试这个方法：

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

您可以从这里获得完整的详细信息。

angularjs - AngularJS ng-class if-else expression

9 回答 9

使用嵌套的内联 if-then 语句（三元运算符）

Related

Reference