Search code examples
angularjsng-class

ngClass Directive: Can I use multiple expressions to add multiple classes?

Here is an example of what I want to achieve 

data-ng-class="{ 'tooltip_show' : showTooltip , 'tooltip__' + brand.settings.name }"

but it doesn't work.

Solution

  • Use the array form for ng-class:

    <div ng-class="[showTooltip ? 'tooltip_show' : '',
                'tooltip__' + brand.settings.name]">
<div>

    OR compute the class in JavaScript:

    <div ng-class="computeClass(tooltip_show, brand.setting.name)">
</div>

    $scope.computeClass(show, name) {
    var obj = {};
    obj.showTooltip = show;
    obj['tooltip_'+name] = true;
    return obj;
};

    The later approach is more easily debugged and better for complex computation.

    See also,