AngularJS ng-class not applying css styles

Question

I have a company site that I am developing with AngularJS and I am having some troubles with ng-class

Here is my HTML:

<a href="timeEntry.php" ng-class="{{(userRole.admin) ? '' : 'inactive'}}">
    LINK
</a>

CSS:

.inactive {
    pointer-events : none;
    cursor         : default;
}

Chrome Inspect Element:

<a href="timeEntry.php" ng-class="inactive">
    LINK
</a>

Obviously I have tested class="inactive" and it is working as it should, Chrome's view source appears to be showing me something that should be working but it is not being applied.

Mike Robinson · Accepted Answer · 2013-08-19 20:06:47Z

5

Assuming userRole.admin is a boolean, this should work

<a href="timeEntry.php" ng-class="{ inactive: !userRole.admin }">
    LINK
</a>

answered Aug 19, 2013 at 20:06

Mike Robinson

25.2k8 gold badges63 silver badges83 bronze badges

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

Comments

BoxerBucks · Accepted Answer · 2013-08-19 20:06:29Z

1

I think this will work:

<a href="timeEntry.php" ng-class="{inactive:userRole.admin}">Link</a>

you can also have multiple conditions in the object, just put commas between them. The format is cssClass:<boolean expression>

answered Aug 19, 2013 at 20:06

BoxerBucks

3,1242 gold badges23 silver badges26 bronze badges

Comments

MattyB · Accepted Answer · 2016-07-26 14:49:40Z

1

ng-class expects an expression, so in your original code the part inside {{}} is being evaluated, and then angular is again evaluating the result of that, trying to interpret 'inactive' as a variable name. If you want to use a ternary just omit the {{}} from your original code

<a href="timeEntry.php" ng-class="userRole.admin ? '' : 'inactive'">
LINK

But for this particular example, the solutions provided by others using the object format are preferred.

answered Jul 26, 2016 at 14:49

MattyB

9522 gold badges9 silver badges16 bronze badges

Collectives™ on Stack Overflow

AngularJS ng-class not applying css styles

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related