I came through the following example of ng-class="expression" in a book. http://plnkr.co/edit/fJGT5L9HZXvgAiAyXwlW?p=preview
ng-class="{error:isError,warning:isWarning}"
I get the controller logic, but my doubt is in the interpolation happening here.
What does the following scenarios mean (what is the evaluated value) and Why?
From the ngClass arguments docs:
The result of the arguments evaluation can be a string representing space delimited class names, an array, or a map of class names to boolean values. In the case of a map, the names of the properties whose values are truthy will be added as css classes to the element.
So in your case the result of the arguments after evaluation is a map which produces:
ng-class="{error:true,warning:true}"
=> class="error warning"
ng-class="{error:true,warning:false}"
=> class="error"
ng-class="{error:false,warning:true}"
=> class="warning"
ng-class="{error:false,warning:false}"
=> no class attribute
As you could notice ng-class get just hash where keys are names of classes and values -- conditions (if true than class will be added to class attribute)
So, ng-class just uses angular expression and check what data it returns (string, array or hash-map) then it applies certain parser to get final classes array to put it to class. One of this is described above.
Angular like as Javascript uses eval mechanism to execute code (expression), but unlike JS Angular uses safe eval called $eval([expression], [locals]) (Docs)
I'm strongly recommending you to read this article about Angular expressions to understand how it works.
Angular will add (or append to the existing class attr) the following class attribute to the element:
isErroris true the error class will be added. And no interpolation is happening here. You are passing JSON TOngClass