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

Question

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?

Answer 1

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.

Answer 2

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()}"