ng-class 中的表达式答案

【问题标题】：expression inside ng-classng-class 中的表达式
【发布时间】：2020-03-07 06:11:09
【问题描述】：

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

当我使用一个简单的...

ng-class="message.type"

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

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

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

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

任何帮助将不胜感激。

【问题讨论】：

它工作正常here，但你确定你需要使用ng-class，而不是简单的class？
如果您将onLoad 更改为no wrap(body)，JSFiddle 将按照您的预期运行 AngularJS 代码。

标签： javascript angularjs

【解决方案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】：

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

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

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

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

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

【讨论】：

另一种选择是class="className-{{message.type}}"
@MichaelStramel 知道这在 IE 以外的所有设备中都能正常工作的原因是什么？ “是IE！”不接受输入答案...
@MichaelStramel 在角度中，当您在类声明中使用角度变量（如您的示例中）时，您应该避免这种情况，并使用 ng-class 代替，因为页面加载时的性能原因。如果您使用 class="className-{{...}}" 页面会将“className-{{...}}”解释为字符串，而 {{..}} 未解析并显示在屏幕上。如果您使用 ng-class，则在 {{..}} 未解析时它不会显示任何内容。这样，使用 ng-class 就不会在屏幕上显示丑陋的代码。在较快的互联网连接中，这并不明显，但在较慢的互联网连接中。