在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]"/>
所以无论何时调用。状态不同于第一次或第二次使用classC和避免指定每个值?
当前回答
使用嵌套的内联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>
并确保你的同事都能读懂:)
其他回答
你可以尝试使用这样的函数:
<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/
上面的解决方案对我来说并不适用于有背景图像的类。我所做的是我创建了一个默认类(你需要在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的类
使用嵌套的内联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>
并确保你的同事都能读懂:)
可以这样用:
<div [ngClass]="{cssClass A: condition 1, cssClass B: condition 2, cssClass C: condition 3}">...</div>
你可以试试这个方法:
</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'}
你可以从这里得到完整的细节。
