AngularJS ng-class if-else表达式

小开

你可以尝试使用这样的函数:

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

小开

最佳答案

使用嵌套的内联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>

并确保它是同事可读:)

小开

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

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

价值的地方。一和值。有两个是正确的，它们优先于。else类

小开

< p > 很明显 !我们可以用下面的例子创建一个函数来返回一个CSS类名。

< / p >

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 if示例处查看完整的代码页

小开

我的一个变通方法是操纵一个模型变量，只是为了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'}"

小开

上面的解决方案对我来说并不适用于有背景图像的类。我所做的是我创建了一个默认类(你需要在else中)，并设置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>

注:处于condition状态的类应该覆盖默认类，即标记为!important的类

小开

这是做到这一点的最好和可靠的方法。下面是一个简单的例子，之后你可以开发你的自定义逻辑:

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

小开

你可以试试这个方法:

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

你可以从在这里中得到完整的细节。

小开

可以这样用:

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