4

I originally had this, and it was easy: ng-class="response.name" (Where response.name was an evaluated expression.)

But now I'm trying to do this: ng-class="{response.name: true, tooltip: someExpression}" (So that response.name is always there but tooltip is context-dependent.)

You see, I can't have response.name as a key in the object...I know this. It just treats it as the string response.name literally and there's no evaluation. But I need the tooltip class to be applied conditionally. I don't know how to combine these needs!

I first tried simply using multiple ng-class attributes, but it just ignored all but the first.

2
  • did you tried the combination ng-if with ng-class Apr 21, 2015 at 18:20
  • 1
    I figured it out. Will post answer when it lets me. It's not too tricky but kind of neat. Apr 21, 2015 at 18:22

4 Answers 4

1

You could do this

<div ng-class="{tooltip: someExpression}" class="{{response.name}}"></div>

Just make sure you test it in all the browsers you are supporting as dynamically setting attributes like this can cause problems with some browsers

1
1

FWIW: As of Angular 1.4 you can mix expressions:

ng-class="[response.name, {tooltip: someExpression}]"
1

ng-class allows you to to this:

<div ng-class="[response.name, {tooltip: someExpression}"></div>
0

I personally solved it with this hideousness:

{ {{ response.name }}: true, 'tooltip-container': {{ !!response.tooltip }} }

Evaluated expressions interpolated into an evaluated expression. Ugly. Definitely favor Rob's way.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.