2

假设我的模型中有两个对象:foo可以采用两个值Foo1Foo2bar具有两个可能值的对象Bar1Bar2

现在,我想div根据这些对象的值应用到我的类。基本上,我想申请MyclassFoo1when foo=Foo1MyclassFoo2whenfoo=Foo2和类似地 for bar

例如,如果foo=Foo1bar=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 组合作为表达式值。

还有其他方法可以实现我的目标吗?

4

6 回答 6

3

我已经设法通过以下方式使用列表符号完全在模板中解决了这个问题:

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

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

于 2014-05-22T06:28:09.490 回答
2

请注意,如果您想在班级名称中使用减号 (-),则应引用班级名称(请查看“二等”)。

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

<div ng-class="{first: hasFirst, 'second-class': hasSecond(), third: true, fourthClass: obj.property == value}"></div>
于 2014-05-21T14:49:44.520 回答
2

您是否尝试过以下操作?

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

即使model.fooor.bar变成nullthis 也会添加一个不存在的类,这应该没关系。

于 2014-05-21T14:48:12.820 回答
1

我找到了另一种方法!

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

给你

<div class="fooClassName" ng-class="foo"></div>
于 2014-05-22T09:24:30.170 回答
1

这对我有用,在视图中使用数组:

做就是了:

<div ng-class="[class1, class2]"></div>
于 2015-09-18T09:33:29.657 回答
0

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

<div ng-class="{'{{class1}}': expr1, '{{class2}}': expr2}"></div>
于 2015-10-14T06:04:12.650 回答