有條件的類不適用於Bootstrap和Angular？

使用Bootstrap,Angular和ui-bootstrap我創建了一堆看起來像普通按鈕（working plunker here）的單選按鈕。有條件的類不適用於Bootstrap和Angular？

我現在想讓活動按鈕變成藍色（.btn-primary），其餘的變成白色（btn-default）。我發現了一些SO答案，解釋瞭如何有條件地應用類here。我試圖實施該技術，像這樣（Plunker here）：

<div class="btn-group"> 
    <label class="btn" ng-class="{btn-primary: radioModel=='Left', btn-default: radioModel!='Left'}" ng-model="radioModel" btn-radio="'Left'">Left</label> 
    <label class="btn" ng-class="{btn-primary: radioModel=='Middle', btn-default: radioModel!='Middle'}"ng-model="radioModel" btn-radio="'Middle'">Middle</label> 
    <label class="btn" ng-class="{btn-primary: radioModel=='Right', btn-default: radioModel!='Right'}"ng-model="radioModel" btn-radio="'Right'">Right</label> 
</div>

不幸的是它似乎並沒有工作。有誰知道我可以如何使活動按鈕成爲btn-primary，其他人是btn-default？歡迎所有提示！

來源

2015-09-28 kramer65

您正在錯落的css類btn-primary和btn-default附近的報價。您需要引號，因爲對象的屬性中有短劃線。

見edited plunker

來源

2015-09-28 12:23:40

真棒，謝謝！ – kramer65

最後一個問題;有沒有一種方法可以在按鈕被選中時設置'btn-primary'類？這可以節省我在每個按鈕上重新鍵入模型值兩次。 – kramer65

您可以將所有按鈕定義爲'btn btn-default'，並在需要時使用'ng-class'添加類'btn-primary'（參見[plunker] （http://plnkr.co/edit/HZs6qa1eZqTsuxD8coiF?p=preview））。但實際上，如果爲'.btn.active'添加css樣式，則可以擺脫'ng-class'指令：實際上，您想要設置* active *按鈕的樣式，到目前爲止，您可以通過更改他鍵入從*默認*到*主要*（見[另一個plunker]（http://plnkr.co/edit/Xy1MK6SFUpa49lHe8LJP?p=preview）） –

有條件的類不適用於Bootstrap和Angular？

回答

相關問題