Angular JS:将类绑定到两个不同的表达式?

时间:2016-06-09 18:33:01

标签: javascript angularjs angular-ui-bootstrap ng-class

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

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

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

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

效果很好,当表单classifyForm变脏时,它会添加类tab-dirty并以其他方式将其删除。

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

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

if form is dirty,tab-dirty(我现在拥有的) if foobar then tab-foobar

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

2 个答案:

答案 0 :(得分:1)

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

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

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

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

答案 1 :(得分:1)

您不能在此使用ng-class,但您可以执行以下操作,这非常烦人

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