Angular JS: Klasse an zwei verschiedene Ausdrücke binden?

Question

Ich habe einen eckigen Bootstrap Tabset.

HINWEIS: Dies ist eine UI-Bootstrap-Anweisung. So funktioniert ng-Klasse nicht.

Um die Klasse bedingt zu ändern, fand ich hier auf SO:

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

große Arbeiten, wenn das Formular classifyForm verschmutzt ist, fügt es die Klasse tab-dirty und ansonsten entfernt sie.

Außer jetzt muss ich das gleiche tun mit einer anderen Bedingung und einer anderen Klasse in Addition zu dem, was ich habe.

Was die Art und Weise ist es, die beiden Ausdrücke zu kombinieren, so dass ich im Wesentlichen:

if form is dirty,tab-dirty (was ich jetzt habe) undif foobar then tab-foobar

so, wenn die Form verschmutzt ist und Foobar wahr ist, Die resultierende Registerkarte sollte sowohl tab-dirty als auch tab-foobar Klassen haben, wenn nur eine wahr ist, dann nur diese eine Klasse.

Answer 1

Es ist sehr ärgerlich, dass man nicht ng-Klasse auf diese verwenden können, aber Sie können Folgendes tun

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

Answer 2

aktualisieren: ng-class wird nicht auf dem Winkel ui tab Richtlinie funktionieren wie die OP erwähnt. Hier ist der Link zu einem der geloggten Bugs: https://github.com/angular-ui/bootstrap/issues/1741

Sie bieten keine guten Lösungen um es zu umgehen. Die einzige Möglichkeit, die ich sehe, ist, eine Funktion im Controller zu erstellen, um die Logik zu handhaben, die die Klasse (n) anwendet.

In allen anderen Fällen (wenn möglich), dann sollten Sie ng-class verwenden

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