Trouble using conditional ng-class in Angular JS?

Question

I have the following anchor tag:

<a href="#/home" ng-class="{ active: navCtrl.checkCurrent('home')" ng-click="navCtrl.setLink('home')" class="navigation-anchor">Home</a>

I have confirmed by manually adding active to the class attribute of this anchor that my class produces the intended result. I have also confirmed that nav.Ctrl.checkCurrent('home') evaluates to true when I've clicked this link.

However, that being said...this directive fails to produce the results I'm looking for.

The intended function is that when the function is true, the active class will be applied to my anchor tag.

Since I have checked that the class works, and the function produces the correct boolean operator, I must have the syntax for ng-class incorrect. However, I recently completed a tutorial on Code School dealing with Angular JS and they use the following syntax...

ng-class="{ active: tab.isSet(1) }"

...in an anchor tag. When the function tab.isSet(1) evaluates to true the class is applied to the element.

Why is my equal syntax not producing the same result?

Suggest you update the post with any error messages received in the console... — deostroll
– deostroll, Commented Jun 29, 2015 at 9:10

jaecktec · Accepted Answer · 2015-06-29 09:06:57Z

2

Maybe you are missing the closing "}" ?

<a href="#/home" ng-class="{ active: navCtrl.checkCurrent('home') }" ng-click="navCtrl.setLink('home')" class="navigation-anchor">Home</a>

answered Jun 29, 2015 at 9:06

jaecktec

4724 silver badges16 bronze badges

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

2 Comments

Allenph Over a year ago

This was an absolutely stupid mistake. I'm going to leave the question here and give you the accepted answer because you deserve it, but the moderators may think otherwise.

jaecktec Over a year ago

Thanks, I would have posted it as a comment, but I have not enough points yet.

Collectives™ on Stack Overflow

Trouble using conditional ng-class in Angular JS?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related