CODEWITHSUNDEEP
javascriptcssangularjsng-classangularjs-ng-class
CrazySynthax
CrazySynthax

Reputation: 14988

Why doesn't ng-class work with a class name?

I wrote the following code: 

 <style>
    .dotted {
         border:dotted;
     }
 </style>

....

 <p ng-style = "mystyle"  ng-class="dotted "> {{ answer }} </p>

My purpose was that the

element will be put inside dotted border line. It doesn't work. I looked at Angular documentation (https://docs.angularjs.org/api/ng/directive/ngClass) and I saw that:

If the expression evaluates to a string, the string should be one or more space-delimited class names.

I understand that ng-class may contain a class name I defined inside -tag. So.. what am I doing wrong?

Upvotes: 1

Views: 987

Answers (2)

Pankaj Parkar
Pankaj Parkar

Reputation: 136124

ng-class directive evaluates its value against scope of DOM which is bound to, so here dotted get evaluated with scope and it doesn't have value. So you have to provide it as 'dotted'(string)

ng-class="'dotted'"

In your case you should directly use class="dotted" as your class seems to be static.

Upvotes: 5

Ben Taliadoros
Ben Taliadoros

Reputation: 9331

ng-class takes an evaluation so it expects something like this:

ng-class="{class: booleanVar}"

if your class has a hyphen use it with quotes like this:

ng-class="{'my-class-name': someVar === someThing}"

Or a function as such:

ng-class="{'my-class-name': someFuncReturningTruthyValue()}"

Upvotes: 0

Related Questions