Выражение внутри ng-класса

У меня очень простое приложение Angular, и я пытаюсь использовать ng-repeat в сочетании с ng-классом, чтобы повторить шаблон и применить другой класс к внешнему div в зависимости от одного из свойств данных будучи связанными.

Это сработало, когда я использовал простой...

ng-class="message.type"

... но, к сожалению, мне нужно конкатенировать строку до начала типа сообщения.

Я попытался создать JSfiddle здесь...

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

... но это моя первая попытка сделать JSfiddle тоже, и я должен делать что-то неправильно, потому что материал Angular, похоже, не работает. Он действительно показывает, что я пытаюсь сделать с этим выражением.

Любая помощь будет действительно оценена.

Ответы

Ответ 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"}
    ]

}

в скрипте вы помещаете {{}} вокруг выражения, не делайте этого, потому что это выражение.

Ответ 2

FYI, альтернатива тому, что ответил @camus:

class="{{'className-' + message.type}}"

При использовании class выражение (внутри {{}} s) должно оцениваться в строке имен классов с разделителями пространства.

При использовании ng-class выражение должно оцениваться одним из следующих:

  • строка имен классов с разделителями пространства или
  • и массив имен классов, или
  • map/object имен классов для булевых значений.