在 AngularJS ng-class 中链接多个表达式答案

【问题标题】：Chain multiple expressions in AngularJS ng-class在 AngularJS ng-class 中链接多个表达式
【发布时间】：2015-04-17 20:26:53
【问题描述】：

我正在尝试将两个不同的表达式链接到 ng-class，其中一个应用了过滤器，例如：

<body ng-class="controller | camel2hyphens" ng-class="{overflow: isOverflow}">

但 Angular 只使用其中之一（这是有道理的）。

我尝试过这样使用表达式数组：

<body ng-class="[(controller | camel2hyphens), {overflow: isOverflow}]">

但是设置的CSS类是：

class="login-controller [object Object]"

有没有什么方法可以用ng-class 来完成这个（无需在Controller 中编写带有逻辑的方法）。

谢谢！

【问题讨论】：

ng-class="{overflow: isOverflow} {{controller | camel2hyphens}}" 工作吗？
或者类似class='{{controller|camel2hyphens}}'的第一个表达式
@Strawberry 谢谢，但它不起作用，它将controller 变量直接打印到ng-class 中：<body ng-class="{overflow: isOverflow} login-controller" class="overflow"></div>
@Chandermani 做到了，谢谢！但我正在寻找一种方法将两个表达式链接在同一个 ng-class

【解决方案1】：

您可以将class 与ng-class 结合使用

<body class="{{controller | camel2hyphens}}" ng-class="{overflow: isOverflow}">

【讨论】：

谢谢，做到了，不过，我一直在寻找一种在 ng-class 中使用单个表达式（可能带有两个子表达式）的方法。几天前我在玩它，并且得到了一些工作，不幸的是我丢失了该代码:(
我最终做的是：ng-class="[(controller | camel2hyphens), isOverflow ? 'overflow' : '']"，不确定这是否比您的回答想法有任何优势。谢谢！！

【解决方案2】：

似乎您尝试这样做的方式仅受 Angular >=1.4 支持。

如果表达式的计算结果为数组，则数组的每个元素都应该是一个字符串，该字符串是一个或多个以空格分隔的类名。

这样，您自己的建议是最好的，因为所有代码都保留在 ng-class 中。

ng-class="[(controller | camel2hyphens), isOverflow ? 'overflow' : '']

【讨论】：