Is there a way to mix angular class directive with Boolean and ternary expression?

I'm trying to write a mix of ternary and Boolean expression in the angular class (ng-class) directive. but I can't find the right syntax to make it work, or find a decent example on the web.

I know that in angular class directive we can write a ternary expression such as the following.

<... ng-class="isAdmin ? 'enabled' : 'disabled'" ...>

And a Boolean expression such as.

<... ng-class="{visible:isPowerUser}" ...>

But is there a way to mix them like this?

<... ng-class="{visible:isPowerUser} & (isAdmin ? 'enabled' : 'disabled')" ...> 

Thanks

Answers


You can use something like this:

ng-class="{visible: isPowerUser, enabled: isAdmin, disabled: !isAdmin}"
  • if the isAdmin is true, the class enabled will be assigned
  • else !isAdmin (is false), the disabled class will be assigned

The visible will be also assigned if the isPowerUser is true. More details ngClass

Other options could be like this:

ng-class="{visible: isPowerUser && isAdmin}" 

which will assign visible class only if both parts are true


You could separate the functionality if its only visible you are worried about for the isPowerUser:

ng-if="isPowerUser" ng-class="{true:'enabled', false:'disabled'}[isAdmin]"

Need Your Help

Does this method in runnable object needs synchronization?

java thread-safety synchronized

The following method belongs to an object A that implements Runnable. It's called asynchronously by other method from the object A and by code inside the run method (so, it's called from other thre...

SQL set floating point precision

sql floating-point precision truncate

For a SQL int that is being converted to a float, how do I set the precision of the floating point number?