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:

  1. a string of space-delimited class names, or
  2. and array of class names, or
  3. a map/object of class names to boolean values.