在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和避免指定每个值?


当前回答

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

其他回答

可以这样用:

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

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

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

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

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

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