納克級相反條件的都不能正常工作

<div ng-class="{ 'green' : flag, 'red' : !flag }"> 
    {{flag}} 
</div>

並將其編譯爲<div class="red green">true</div>

在codepen或jsbin我不能複製，這是一些黑魔法在這裏，因爲昨天它運行良好，我沒有碰它。我希望這裏的某個人可以分享一個想法，爲什麼會發生這種情況，因爲我完全停留在這一點上。當我刪除兩個條件中的任何一個時，剩下的一個工作正常 - 根據標誌值設置正確的類。

UPDATE：關於三元操作數的所有建議都不會幫助我，因爲在實際情況中我有複雜的條件，但它歸結爲單個相反的布爾變量差異。我已經將這種差異限制在2個條件之內，並且僅使用該布爾變量，但它仍然不起作用。精簡的代碼就是我發佈的代碼。

2017-02-15 pokrishka

「flag」對象的值是什麼？ –

我裹在那裏標誌被設置爲true到$超時的地方，它開始工作。不過，我仍然不明白，如果這是一個範圍摘要問題，它怎麼會在頁面上顯示true以及爲什麼這兩個條件都滿足了。一些量子力學雙縫s ** t在那裏。

2017-02-15 14:09:17 pokrishka

嘗試使用這樣的事情：

<div ng-class="{flag ? 'green' : 'red'}">

2017-02-15 11:29:27

什麼OP正在嘗試應該有工作..這是做同樣的其他方式... –

使它有條件像：

<div ng-class="(flag) ? 'green' : 'red'">

或者

<div ng-class="{true:'green', false:'red'}[flag]"></div>

請註明是否能解決問題，因爲這些只是其他使用ng-class指令的方法。

如果問題仍然存在，您可以指定值flag。它是不確定的嗎？它是一個布爾值？ ...

2017-02-15 11:29:48

但OP正在嘗試應該有工作..這是做同樣的其他方式... –

是的100％正確。如果這有什麼區別，他應該嘗試。我已經更新了我的答案。 –

試試這個像這樣

<div ng-class="flag ? 'green' : 'red'">

2017-02-15 11:41:36

回答