ngClass指令:Сan我使用多个表达式添加多个类?

Here is an example of what I want to achieve

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

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

but it doesn't work! Can somebody help?

但它不工作!有人可以帮忙吗?

3 个解决方案

#1

Use the array form for ng-class:

使用ng-class的数组形式:

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

OR compute the class in JavaScript:

或者用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;
};

The later approach is more easily debugged and better for complex computation.

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

#2

It looks like you haven't set a value for the second item. Did you mean something like

看起来您还没有为第二项设置值。你是说像这样的东西吗

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

或

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

吗?

#3

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

http://jsbin.com/genaqapefe/edit?html,js、输出

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

This is working for me in this bin. I couldn't get it to evaluate without the curly braces, although not sure if that's the best practice.

这是在这个箱子里为我工作。如果没有花括号，我就无法计算，尽管我不确定这是否是最佳实践。

#1