expression inside ng-class
html :
<div ng-controller="mainCtrl">
<div ng-repeat="message in data.messages" ng-class="'className-' + message.type">
Repeat Me
</div>
</div>
</div>
javascript :
var mainCtrl=function($scope) {
$scope.data = {}
$scope.data.messages = [
{
"type": "phone"},
{
"type": "email"},
{
"type": "meeting"},
{
"type": "note"}
]
}
in the fiddle you put some {{}} around the expression dont do it because it is an expression.
FYI, an alternative to what @camus answered:
class="{{'className-' + message.type}}"
When using class
, the expression (inside {{}}s) must evaluate to a string of space-delimited class names.
When using ng-class
, the expression must evaluate to one of the following:
- a string of space-delimited class names, or
- and array of class names, or
- a map/object of class names to boolean values.