使用ng-class应用多个类

Question

假设我的模型中有两个对象：foo可以带两个值Foo1和Foo2以及对象bar两个可能的值Bar1和Bar2。

现在，我想根据这些对象的值应用于我的div类。 基本上，我希望在MyclassFoo1时foo=Foo1，MyclassFoo2 foo=Foo2以及bar同样适用。{/ p>

例如，如果foo=Foo1和bar=Bar2我想以

结尾

<div class="MyClassFoo1 MyClassBar2"></div>

我在这里遇到的两个问题是：

• 类名是根据对象值动态生成的
• Foo类独立于Bar类

我尝试使用语法

<div ng-class="{class1: expr1, class2: expr2}"></div>

但它不起作用，因为字典键不能组成'MyClass' + foo

其他语法

ng-class="{expr_val1: class1, expr_val2: class2}[expr]"

看起来也没有看错：我必须将所有foo-bar组合作为表达式值。

有没有其他方法可以实现我的目标？

Answer 1

我设法完全在模板中解决问题，使用以下列表示法：

ng-class="[foo ? 'MyClass' + foo : '', bar ? 'MyClass' + bar : '']"

您可以将任意角度表达式放入列表中。

Answer 2

您是否尝试过以下操作？

<div class="MyClass{{model.foo}} MyClass{{model.bar}}">

即使model.foo或.bar变为null，这也会添加一个不存在的类，这无关紧要。

Answer 3

请注意，如果您想在类名中加上减号（ - ），则应引用类名（请查看“二等”）。

您还可以将类名的可用性绑定到函数。函数应返回布尔值。

<div ng-class="{first: hasFirst, 'second-class': hasSecond(), third: true, fourthClass: obj.property == value}"></div>

Answer 4

我找到了另一种方式！

$scope.foo = 'fooClassName'; 
<div ng-class="foo"></div>

给你

<div class="fooClassName" ng-class="foo"></div>

Answer 5

这适用于我，在视图中使用数组：

只是这样做：

<div ng-class="[class1, class2]"></div>

Answer 6

我尝试过这种方式并且它有效，但唯一的缺点是它在更改模块时不会动态更新

<div ng-class="{'{{class1}}': expr1, '{{class2}}': expr2}"></div>