使用ng-class添加多个类，其中一个类是有条件的

I got this code:

我有这个代码:

ng-class="{selectedHeader: key == selectedCol}"

It works but I would like too add the 'key' value as a class too, Ive tried:

它有效,但我也希望将'key'值添加为类,我尝试过:

ng-class="[{selectedHeader: key == selectedCol}, key]"

But that wont work, does anyone know how to solve this?

但那不起作用,有谁知道如何解决这个问题?

7 个解决方案

#1

If you always want key to be added as a class:

如果您总是希望将键添加为类:

ng-class="{selectedHeader: key == selectedCol, key: true]"

or you can just put it into a class attribute with {{}} interpolation.

或者您可以使用{{}}插值将其放入类属性中。

ng-class="{selectedHeader: key == selectedCol}" class="{{key}}"

Just for completeness, if you only want to include it if it's equal to selectedCol:

只是为了完整性,如果你只想包含它,如果它等于selectedCol:

ng-class="{selectedHeader: key == selectedCol, key: key == selectedCol}"

#2

You could handle this using $scope methods to define those dynamic class names. This would look something like this:

您可以使用$ scope方法来处理这个,以定义这些动态类名。这看起来像这样:

Controller:

$scope.selectedCol = 3;
$scope.key = 3;

// dynamic ng-class values
$scope.selectedHeader = function () {
    if ($scope.selectedCol === $scope.key)
        return 'header-selected';
    else
        return false;
};

// selected header definition for ng-class
$scope.headerKey = function () {
    return 'header-' + $scope.key;
};

View:

<header ng-class="[ selectedHeader(), headerKey() ]">
    <h1>Header element</h1>
</header>

Result:

<header ng-class="[ selectedHeader(), headerKey() ]" class="header-selected header-3">
        <h1>Header element</h1>
</header>

#3

// single class  
<div ng-class="{'myclass' : condition}">  
</div>  
  
// multiple class  
<div ng-class="{'myclass1': condition1, 'myclass2': condition2}">  
 some content  
</div>

#4

You can do it by

你可以做到

  ng-class="{selectedHeader: key == selectedCol}" class="{{key}}"

#5

I think what you are looking for is: ng-class="{ {{key}}:{{key}} }"

我认为你要找的是:ng-class =“{{{key}}:{{key}}}”

Also keep in mind that css classes should not begin with a number, so you may need to prefix your key value.

另请注意,css类不应以数字开头,因此您可能需要为键值添加前缀。

#6

Try this:

class="{{key}} ng-class:{'selectedHeader': key == selectedCol};

#7

This will not work because { selectedHeader : key == selectedCol } will be evaluated as an object and not as a string:

这不起作用,因为{selectedHeader:key == selectedCol}将被评估为对象而不是字符串:

ng-class="[{selectedHeader: key == selectedCol}, key]"

The following code work, it will add the classes 'selectedHeader' and value of key:

下面的代码工作,它将添加类的selectedHeader和key的值:

ng-class="[key == selectedCol ? 'selectedHeader' : '', key]"

#1