AngularJS ng类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并避免指定每个值?

Answers:


523

使用嵌套的嵌入式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>

并确保您的同事可读:)


2
如果我需要添加两个类怎么办?
mircobabini 2014年

2
抱歉,我的意思是“如果这是一类,如果是那一类”。两课,两个不同的条件。
mircobabini 2014年

17
@mircobabini,ng-class="{'class1': ##condition1## , 'class2': ##condition2## }"如您在上述问题中所见
Jossef Harush

2
这不是我想在视图中看到的东西。该视图逻辑太多。
AturSams 2014年

19
@ Zehelvion我不得不不同意。这是视图逻辑。您将不需要决定要在控制器或服务中使用哪个列类。这就是应该的位置。
尼克

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
这是比嵌套三元运算符更好的解决方案
大卫说,请莫妮卡(Monica)

2
爱它。这使html比简单的ng-class条件更加干净。
mrgnw

17
这种方法的问题是,现在您要让控制器知道CSS类。这不是一个好方法。在控制器中设置一个变量,然后根据该变量确定在HTML中使用哪个类是更好的解决方案。
VtoCorleone 2014年

1
这只是关于如何实现的提示,此问题很简单,可以用三元运算符处理,但是当您需要更多逻辑时,您不想直接在HTML中执行此操作,最快的解决方案之一是就像我一样,可以在控制器中使用一个函数(如果您不希望控制器知道CSS,则还可以监视和设置作用域变量,并基于该值在HTML中使用条件)。但是,如果您有更多的逻辑或很多重复的内容,请将其放入指令中,它应该更干净。该示例主要是关于不将逻辑放入HTML中
DotDotDot 2014年

1
如果您需要为两个或三个以上不同的类添加条件,则比三元运算符更好,请使用逻辑将html分开:)
Tho Vo

61

我遇到的情况是,我需要两个都可以成立的'if'语句和一个都不成立的'else'或默认值,不确定这是否对Jossef的回答有所改善,但对我来说似乎更干净:

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

您可以从此处获取完整的详细信息。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.