2016-06-09 67 views
1

我有一個角度引導標籤集。Angular JS:將類綁定到兩個不同的表達式?

備註:這是一個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類,如果只有一個是真的,那麼只有這一個類。

+0

我會在控制器中創建一個方法來生成類字符串,也許帶有參數:) –

+0

這是一個很好的方法。可能沒有其他辦法。 – Steve

回答

1

這是很煩人,你不能在此使用納克級,但你可以做以下

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

我不確定如何構建這樣的東西。謝謝。 – Steve

+0

它的工作原理。我在我的應用程序中使用了同樣的東西。 –

+0

我不得不進行編輯以確保添加的類都在它們之間有空間。否則,在上述情況下,你會得到'class =「tab-dirtyfoobar」' – Steve

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 }"> 
+0

我不能使用ng-class,這是一個ui-bootstrap指令。如果我可以使用ng-class,那就像你建議的那樣簡單。 – Steve

+0

你可以爲它做一個笨蛋嗎?這很奇怪爲什麼'ng-class'不起作用。 – DerekMT12

+0

「Tab」是一個指令,指令實際上寫出了自己的引導html代碼並將其內容變換。不管誰創建它,都不允許添加ng類。這是指令的舊版本,0.13.1。也許現在的一個更聰明,但這個項目陷入了舊的一個。 – Steve