Question

我正在以下列方式使用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与first或second不同，就会使用classC并且不指定每个值。

谢谢！

Answer 1

使用嵌套的内联if-then语句（ Ternary Operators ）

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

并确保您的同事可读：）

Answer 2

您可以尝试使用类似的功能：

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

Answer 3

我遇到的情况是，我需要两个'if'语句，如果两个'if'或者'else'或默认，如果两者都不是真的，不确定这是否对Jossef的答案有所改善，但对我来说似乎更清晰：< / p>

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

如果value.one和value.two为真，则它们先于.else-class

Answer 4

<强>显然！我们可以使用以下完整示例来创建一个返回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 if example

的完整代码页

Answer 5

上述解决方案对我来说对某些具有背景图像的课程并不起作用。我所做的是创建一个默认类（在其他地方你需要的那个）并设置class =＆＃39; defaultClass＆＃39;然后ng-class =＆＃34; {class1：abc，class2：xyz}＆＃34;

val map = mapOf("a" to 1, "b" to 2, "c" to 3)

P.S：条件中的类应覆盖默认类，即标记为！important

Answer 6

这是做到这一点的最佳和最可靠的方法。这是一个简单的示例，之后您可以开发自定义逻辑：

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

Answer 7

我的解决方法是仅为ng-class切换操作模型变量：

例如，我想根据列表的状态切换类：

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

Answer 8

以这种方式使用它：

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

Answer 9

您可以尝试以下方法：

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

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

角度ng-class if-else表达式

9 个答案:

使用嵌套的内联if-then语句（ Ternary Operators ）