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

I have an angular bootstrap tabset.

我有一个角度引导标签集。

NOTE: this is a ui-bootstrap directive. So ng-class does not work.

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

To be able to change the class conditionally, I found here on SO:

为了能够有条件地改变课程,我在SO上找到了这里:

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

Works great, when the form classifyForm is dirty, it adds the class tab-dirty and otherwise removes it.

工作得很好,当表单classifyForm是脏的时,它会添加类tab-dirty,否则将其删除。

Except now I need to do the same thing with another condition and another class in addition to what I have.

除了现在我需要用另一个条件和另一个类做同样的事情。

What is the way to combine the two expressions, so I get essentially:

结合两个表达式的方法是什么,所以我基本上得到了:

if form is dirty,tab-dirty (what I have now) and if foobar then tab-foobar

如果表格很脏,表格很脏(我现在有什么),如果foobar然后tab-foobar

so, if the form is dirty and foobar is true, the resulting tab should have both tab-dirty and tab-foobar classes, if only one is true then only have that one class.

所以,如果表单是脏的并且foobar是真的,那么结果选项卡应该同时具有tab-dirty和tab-foobar类,如果只有一个是真的那么只有那个类。

2 个解决方案

#1

It is very annoying that you can't use ng-class on this but you can do the following

你不能在这上面使用ng-class是非常烦人的,但你可以做到以下几点

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

#2

Update: ng-class won't work on the angular ui tab directive like the OP mentions. Here is the link to one of logged bugs: https://github.com/angular-ui/bootstrap/issues/1741

更新:ng-class不会像OP提到的那样对角度ui tab指令起作用。以下是其中一个已记录的错误的链接:https://github.com/angular-ui/bootstrap/issues/1741

They don't offer any good solutions to get around it. So the only way I see is making a function in the controller to handle the logic to apply the class(es).

他们没有提供任何好的解决方案来解决它。因此,我看到的唯一方法是在控制器中创建一个函数来处理应用类的逻辑。

For all other cases (where possible), you should use ng-class

对于所有其他情况(如果可能),您应该使用ng-class

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

#1