Angular JS：将 class 绑定到两个不同的表达式？

Question

我有一个 angular bootstrap 标签集。

注意：这是一个ui-bootstrap指令。所以 ng-class 不起作用。

为了能够有条件地更改 class，我在 SO 上找到了这里：

  <tab heading="My Tab" class="{{classifyForm.$dirty ? 'tab-dirty':''}}">

效果很好，当表单 classifyForm 变脏时，它会添加 class tab-dirty，否则会删除它。

除了现在我需要对另一个条件和另一个 class 做同样的事情添加我所拥有的。

这两个表达式的组合方式是什么，所以我得到了本质：

if form is dirty,tab-dirty（我现在有的）和if foobar then tab-foobar

所以，如果表单是脏的并且 foobar 是真的，那么生成的选项卡应该同时具有 tab-dirty 和 tab-foobar classes，如果只有一个是真的那么只有那个一个 class.

Answer 1

Update: ng-class 不会像 OP 提到的那样在 angular ui tab 指令上工作。这是记录错误之一的 link：https://github.com/angular-ui/bootstrap/issues/1741

他们没有提供任何好的解决方案来绕过它。所以我看到的唯一方法是在控制器中创建一个函数来处理应用 class(es).

的逻辑

对于所有其他情况（如果可能），您应该使用 ng-class

<tab heading="My Tab" ng-class="{ 'tab-dirty': classifyForm.$dirty, 'your-other-class': someOtherProperty }">

Answer 2

很烦人，你不能在这上面使用 ng-class 但你可以执行以下操作

<tab heading="My Tab" class="{{ (classifyForm.$dirty ? 'tab-dirty ':'') + (classifyForm.foobar ? 'tab-foobar ':'')}}">

Angular JS: bind class to two different expressions?