expression inside ng-class

Question

I have a very simple Angular App and I'm trying to use ng-repeat in conjunction with ng-class to repeat a template and apply a different class to the outer div depending on one of the properties of the data being bound.

this worked when I used a simple...

ng-class="message.type"

...but unfortunately I need to concatenate a string to the start of the message type.

I tried to create a JSfiddle here...

http://jsfiddle.net/XuYGN/5/

... but it's my first attempt at making a JSfiddle too and I must be doing something wrong because the Angular stuff doesn't seem to be running. It does show what I'm trying to do with the expression though.

Any help would really be appreciated.

Answer 1

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.

Answer 2

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.