angularjs - クラスの1つが条件付きである場合、ng-classで複数のクラスを追加します

Question

私はこのコードを得ました：

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

それは機能しますが、「キー」値もクラスとして追加したいと思います。

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

しかし、それはうまくいきません、誰もこれを解決する方法を知っていますか?

Answer 1

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

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

Answer 3

これを試して：

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