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:
ng-class="[{selectedHeader: key == selectedCol}, key]"
But that wont work, does anyone know how to solve this?
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:
ng-class="{selectedHeader: key == selectedCol, key: key == selectedCol}"
key:true: it will add the class key. Not sure about the other missing classes though.You could handle this using $scope methods to define those dynamic class names. This would look something like this:
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>
// single class
<div ng-class="{'myclass' : condition}">
</div>
// multiple class
<div ng-class="{'myclass1': condition1, 'myclass2': condition2}">
some content
</div> You can do it by
ng-class="{selectedHeader: key == selectedCol}" class="{{key}}"
classI think what you are looking for is: 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.
This will not work because { selectedHeader : key == selectedCol } will be evaluated as an object and not as a string:
ng-class="[{selectedHeader: key == selectedCol}, key]"
The following code work, it will add the classes 'selectedHeader' and value of key:
ng-class="[key == selectedCol ? 'selectedHeader' : '', key]"
Try this:
class="{{key}} ng-class:{'selectedHeader': key == selectedCol};
I have a array of classes (vm.classList), and needed to dynamically add a conditional class ('required-border') to a table. This is what worked for me.
In the controller:
vm.classList = [ 'base-table', 'medium-height' ];
In the template:
ng-class="[{ 'required-border': vm.isRequired && vm.rowCount == 0 }, vm.classList ]"
