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

Question

我得到了这个代码：

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

它可以工作，但我也想将'key'值添加为一个类，我试过了：

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