ngClass 指令：我可以使用多个表达式来添加多个类吗？答案

【问题标题】：ngClass Directive: Can I use multiple expressions to add multiple classes?ngClass 指令：我可以使用多个表达式来添加多个类吗？
【发布时间】：2017-07-14 13:15:45
【问题描述】：

这是我想要实现的示例

data-ng-class="{ 'tooltip_show' : showTooltip , 'tooltip__' + brand.settings.name }"

但它不起作用。

【问题讨论】：

为什么 'tooltip_show' 的一个 ng-class 中有两个值？
我需要一个依赖于 showTooltip 的类，另一个依赖于这个变量brand.settings.name。我可以用其他方式吗？
正如@harriyot 提到的那样。这应该足够了 { 'tooltip_show' : showTooltip , 'tooltip__' + brand.settings.name : tooltipText }
这行不通。
发生了什么？你有任何错误吗？你能发布更多关于你如何实现这一目标的代码吗？

标签： angularjs ng-class

【解决方案1】：

使用ng-class的数组形式：

<div ng-class="[showTooltip ? 'tooltip_show' : '',
                'tooltip__' + brand.settings.name]">
<div>

或者在 JavaScript 中计算类：

<div ng-class="computeClass(tooltip_show, brand.setting.name)">
</div>

$scope.computeClass(show, name) {
    var obj = {};
    obj.showTooltip = show;
    obj['tooltip_'+name] = true;
    return obj;
};

后一种方法更容易调试，更适合复杂的计算。

另见，

【讨论】：

是的，这就是我认为你可以做到的@стас Пилипко，很好的回答 georgeawg :+1:

【解决方案2】：

您似乎尚未为第二项设置值。你的意思是像

{ 'tooltip_show' : showTooltip , 'tooltip__' + brand.settings.name : tooltipText }

或

{ 'tooltip_show' : showTooltip , 'tooltip__' : brand.settings.name }

【讨论】：

'tooltip__' + brand.settings.name - 当我只写这部分时，我会收到类似 class="tooltip__class" 的东西。 brand.settings.name - 它是可变的，取决于页面。

【解决方案3】：

http://jsbin.com/genaqapefe/edit?html,js,output

data-ng-class="{ 'tooltip_show': showToolTip, {{ 'tooltip_' + brand.settings.name }}: true }"

这在这个垃圾箱中对我有用。如果没有大括号，我无法对其进行评估，尽管不确定这是否是最佳做法。

【讨论】：

@ стас Пилипко 还是您希望它始终显示这一点？您可以只使用一个类，例如：class="{{ 'tooltip_' + brand.settings.name }}" data-ng-class="{ 'tooltip_show': showToolTip }"
见AngularJS Developer Guide - Why mixing interpolation and expressions is bad practice
在同一元素上使用ngClass 指令时，不应在class 属性的值中使用插值。见AngularJS ng-class Directive Reference - Known Issues。
@georgeawg 是的，你是对的。我认为这个问题的一个更好的答案可能是重组房产的建造方式。例如，不是在 HTML 中，而是在 Javascript 中。