Javascript ng类中的表达式

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

当我使用一个简单的

ng-class="message.type"

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

我试图在这里创建一个JSFIDLE

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

非常感谢您的帮助。

html:

}​

---

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

FYI，@camus回答的另一个选项：

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

使用

class

时，表达式（在{}}内）的计算结果必须是一个以空格分隔的类名字符串

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

以空格分隔的类名字符串，或

和类名数组，或

类名到布尔值的映射/对象

---

它工作正常，但您确定需要使用

ng类

，而不是简单的

类

？如果您将

onLoad

更改为

no wrap（body）

，JSFiddle将像您期望的那样运行AngularJS代码。另一种替代方法是

class=“className-{{message.type}”

@MichaelStramel你知道除了IE之外，这一切都适用的原因是什么吗？“It's IE！”类型答案不被接受…@MichaelStramel in angular，当您在类声明中使用角度变量时（如您的示例中），您应该避免这样做，并在页面加载时使用ng类，以提高性能。如果使用class=“className-{{…}}”，页面将把“className-{{…}}”解释为字符串，而{{…}}未解析并显示在屏幕上。如果使用ng类，则在未解析{..}时，它不会显示任何内容。这样，使用ng类，您就不会在屏幕上看到丑陋的代码。在更快的互联网连接中，这一点并不明显，但在较慢的互联网中却是如此。你救了我一天；）

var mainCtrl=function($scope) {

    $scope.data = {}

    $scope.data.messages = [
        {
            "type": "phone"},
        {
            "type": "email"},
        {
            "type": "meeting"},
        {
            "type": "note"}
    ]

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