AngularJS ng-class adding [object Object] class when using array of objects [duplicate]

Question

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()} )

@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
– Carson, Commented Mar 9, 2020 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
– Anurag Srivastava, Commented Mar 9, 2020 at 16:32
As in, what option 3 says on the overview within the docs docs.angularjs.org/api/ng/directive/ngClass is what I mean, but doesnt seem to work — Carson
– Carson, Commented Mar 9, 2020 at 17:57

Carson · Accepted Answer · 2020-03-09 18:28:15Z

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

answered Mar 9, 2020 at 18:28

Carson

1,2976 gold badges23 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS ng-class adding [object Object] class when using array of objects [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related