Question

我有一个非常简单的Angular App，我正在尝试将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"}
    ]

}

在小提琴中，你在表达式周围添加了一些{{}}，因为它是一个表达式。

Answer 2

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

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

使用class时，表达式（{{}}内部）必须求值为一系列以空格分隔的类名。

使用ng-class时，表达式必须评估为以下之一：

一串以空格分隔的类名，或
和类名称数组，或
类名的映射/对象为布尔值。

ng-class中的表达式

2 个答案: