Stack Overflow
Stack Overflow

Questions tagged [ng-class]

The angularjs ngClass directive allows you to set CSS classes on an HTML element, dynamically, by databinding an expression that represents all classes to be added.

The ngClass directive allows you to set classes on an element, dynamically, by databinding an expression that represents all classes to be added.

The directive won't add duplicate classes if a particular class was already set.

When the expression changes, the previously added classes are removed and only then the new classes are added.

Closely Related Tags

for AngularJS questions

for AngularJS directive-specific questions

Useful Links

Official ng-class directive documentation

872 questions
620
votes
12 answers

Adding multiple class using ng-class

ALERT: This thread is for the old AngularJS! Can we have multiple expression to add multiple ng-class ? for eg.
If yes can anyone put up the example to do so. .
Aditya Sethi
  • 10,486
  • 11
  • 26
  • 31
265
votes
9 answers

AngularJS ng-class if-else expression

With AngularJS I'm using ng-class the following way:
I'm wondering if I can use the if-else expression to do…
Dor Cohen
  • 16,769
  • 23
  • 93
  • 161
98
votes
10 answers

adding and removing classes in angularJs using ng-click

I am trying to work how to add a class with ngClick. I have uploaded up my code onto plunker Click here. Looking at the angular documentation i can't figure out the exact way it should be done. Below is a snippet of my code. Can someone guide me in…
NewKidOnTheBlock
  • 1,491
  • 3
  • 16
  • 32
41
votes
9 answers

How to use ng-class in select with ng-options

I have an array of Person objects var persons = [ {Name:'John',Eligible:true}, {Name:'Mark',Eligible:true}, {Name:'Sam',Eligible:false}, {Name:'Edward',Eligible:false}, {Name:'Michael',Eligible:true} ]; and i am using select with ng-options like…
I_Debug_Everything
  • 3,776
  • 4
  • 36
  • 48
40
votes
1 answer

Angular 2 Doing an else with ngClass

I have the following template :

While this is working, I find it a bit ugly as I have to repeat twice the condition. Is there a way to something like : [ngClass]={condition ? checked :…

Scipion
  • 11,449
  • 19
  • 74
  • 139
38
votes
5 answers

Complex angular js ng-class

I have the component and have a problem setting the css class to it. I want it to always have a class of "box", then to have additional classes specified by the directive "class" argument and one conditional class "mini". Conceptually what I want to…
Szymon Wygnański
  • 10,642
  • 6
  • 31
  • 44
37
votes
3 answers

Angular ng-class if else

I'd like to know how to do to make the False ng-class. page.isSelected(1) is TRUE if the page if the page is selected, else FALSE
I therefore want you if: isSelected is TRUE: center…
Garu
  • 1,159
  • 2
  • 10
  • 15
31
votes
5 answers

ng-class condition changes, but not updating classes

I have a very strange issue. I have to set an active class on the appropriate
  • when the $scope.selectedCat == cat.id. The list is generated with ng-repeat. If selectedCat is false, the 'Browse All Categories' list item (outside of ng-repeat) is…
    • orszaczky
    • 13,301
    • 8
    • 47
    • 54
    26
    votes
    1 answer

    ng-class not being applied

    I have a textarea containing a message to be posted and a span with the number of characters still available.