javascript - ng-class 中的表达式

Question

我有一个非常简单的 Angular 应用程序，我正在尝试将 ng-repeat 与 ng-class 结合使用来重复模板并根据所绑定数据的属性之一将不同的类应用于外部 div。

当我使用简单的...

ng-class="message.type"

...但不幸的是，我需要将一个字符串连接到消息类型的开头。

我试图在这里创建一个 JSfiddle ......

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

...但这也是我第一次尝试制作 JSfiddle，我一定做错了，因为 Angular 的东西似乎没有运行。它确实显示了我试图用这个表达式做什么。

任何帮助将不胜感激。

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"}
    ]

}​</p>

在小提琴中，您在表达式周围放了一些 {{}} 不要这样做，因为它是一个表达式。

Answer 2

仅供参考，@camus 回答的替代方案：

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

使用class时，表达式（在 {{}} 内）必须计算为以空格分隔的类名字符串。

使用ng-class时，表达式的计算结果必须为以下之一：

1. 一串以空格分隔的类名，或
2. 和类名数组，或
3. 类名到布尔值的映射/对象。