AngularJS For Everyone Tutorial #8 - Conditional Classes With ngClass

Support Free Tutorials

The best shared web hosting

Subscribe to Level Up Pro for extra features!

Subscribe to the Level Up Newsletter

To Support Level Up Tuts:

Simple cloud hosting, built for developers.:

HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.

[pradeepvelavali]

Thanks much Man, i was literally searching over the Internet for this....🤗🤗

[Danconable]

Very informative and clear. Solved my issue in a matter of minutes. You rock dude!

[chipchapmaniii]

THank you! I have been trying to figure out an edit toggle for quite a long time!

[zdeveloperstudios]

thank you sir for this very clear tutorial... I was missing { } in my ng-class and was getting really frustrated! nobody cares I know, but you just unfrustrated me :) thank you again!

[maximchernin]

just had same same problem, you helped alot man! thanks.

[patriciovargas]

so dirList.toggle = true, set the value to true. In jQuery it will keep changing it from true to false and so on every time you click on the button, so it hiddes and it shows the names. is there anyway to archive this using AngularJS?

[GifCoDigital]

At 7:00, before you use the ternary operator you have curly brackets, when you then change that out to use the ternary operator (or short hand) you remove all curly brackets! It seems like you cant pass in a string to ng-class, it needs an object so: {'class name' : ture/false condition}
But a ternary operator evaluates to whatever the true statement is. In this case the true statement just evaluates to a string (the name of the class). So why cant you just pass in a string to begin with.. ie ng-class='myClass'

[jesus-love]

why didn't you use ng-show on the ul to show the list?