angular ng-class if-elseexpression式
我使用以下方式使用angularjs ng-class：
<div class="bigIcon" data-ng-click="PickUp()" ng-class="{first:'classA', second:'classB', third:'classC', fourth:'classC'}[call.State]"/> 我想知道如果我可以使用if-elseexpression式，我可以做类似这样的事情：
<div class="bigIcon" data-ng-click="PickUp()" ng-class="{first:'classA', second:'classB', else:'classC'}[call.State]"/>
意思是每当call.State与first或second使用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>
并确保它是你的同事可读 🙂
你可以尝试使用这样的function：
<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/
我有一种情况，我需要两个“如果”的陈述，既可以是真实的，也可以是“别的”或默认的，如果都不是真的，不知道这是对Jossef答案的改进，但对我来说似乎更清楚：
ng-class="{'class-one' : value.one , 'class-two' : value.two}" class="else-class"
凡value.one和value.two是真实的，他们先于.else类
显然 ！ 我们可以用下面的完整例子来创build一个返回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如果例子
上面的解决scheme不适合我的背景图像类的某种方式。 我做的是我创build一个默认类（你需要在其他）和设置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
我的一个解决方法是只为ng-class切换操作一个模型variables：
例如，我想根据我的列表状态切换课程：
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'}"
这是做到这一点的最好也是最可靠的方法。 这里是一个简单的例子，然后你可以开发你的自定义逻辑：
//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>
