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

试试这个：

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

Answer 7

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

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

以下代码工作，它将添加类的selectedHeader和key的值：

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

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

7 个答案: