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

Question

这是我想要实现的一个例子

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

但它没有用。

Answer 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;
};

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

另见，

• AngularJS ng-class Directive Reference - Known Issues
• AngularJS Developer Guide - Why mixing interpolation and expressions is bad practice

Answer 2

看起来您没有为第二项设置值。你的意思是

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

或

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

Answer 3

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

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

这对我来说很有用。如果没有大括号，我无法评估它，虽然不确定这是否是最好的做法。