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

Question

我得到了这个代码：

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

它有效，但我也想将“键”值添加为一个类，我已经尝试过了：

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

但是不行，有谁知道如何解决这个问题吗？

Answer 1

如果您始终希望将

key

添加为课程：

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

或者您可以将其放入具有

class

插值的

{{}}

属性中。

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

只是为了完整起见，如果您只想在它等于

selectedCol

时将其包括在内：

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

Answer 2

您可以使用

$scope

方法来定义这些动态类名称来处理此问题。这看起来像这样：

控制器：

$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;
};

查看：

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

结果：

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

Answer 3

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

Answer 4

你可以这样做

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

Answer 5

我想你正在寻找的是：

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

另请记住，CSS 类不应以数字开头，因此您可能需要为键值添加前缀。

Answer 6

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

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

以下代码有效，它将添加类“selectedHeader”和键值：

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

Answer 7

试试这个：

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

Answer 8

我有一个类数组（vm.classList），需要动态地将条件类（“required-border”）添加到表中。这对我有用。

在控制器中：

vm.classList = [ 'base-table', 'medium-height' ];

在模板中：

ng-class="[{ 'required-border': vm.isRequired && vm.rowCount == 0 }, vm.classList ]"