0

I'm trying to combine all my styles for a dropdown item into a single ng-class to reduce watchers, particularly like this...

ng-class="[button.icon, {'disabled': button.disableCallback(), 'hidden':button.hiddenCallback()}]

It gives a dropdown a button if it has an icon, but also defines disabled and hidden styles if they apply. Where button.icon could be any string like "add-icon" "remove-icon" etc. The other two just add disabled or hidden css class if the callback is true.

However, doing this I'm seeing the class being defined as just the object like...

class="[object Object]"

I think it's just adding the second object the {'disabled': button.disableCallback(), 'hidden':button.hiddenCallback()} as the style since it's defined, thinking it's a string?

Is there a better way to do this? Have a dynamic class set on ng-class (the button.icon), and add these conditional ones based on the callback (the {'disabled': button.disableCallback(), 'hidden':button.hiddenCallback()} )

Carson
  • 1,147
  • 5
  • 19
  • 41
  • @AnuragSrivastava hey no not exactly. Since the button.icon is some string for an icon class if it's defined, not a conditional. I didn't really want to add every type of icon to the ng-class with callbacks to enable them. If that makes sense. – Carson Mar 09 '20 at 16:30
  • Yes so you add that in the functions `button.disableCallback()` and `button.hiddenCallback()` so you have a complete class string – Anurag Srivastava Mar 09 '20 at 16:32
  • As in, what option 3 says on the overview within the docs https://docs.angularjs.org/api/ng/directive/ngClass is what I mean, but doesnt seem to work – Carson Mar 09 '20 at 17:57

1 Answers1

1

Using just strings with ternaries fixes this issue I was having and not mixing objects/strings within the ng-class.

ng-class="[button.icon, button.disableCallback() ? 'disabled' : '', button.hiddenCallback() ? 'hidden' : '']"

I believe this is related to the bug under the "Known Issues" of the ngClass page.

https://docs.angularjs.org/api/ng/directive/ngClass

Carson
  • 1,147
  • 5
  • 19
  • 41