你會想要使用ngClass directive。由於您只是切換類,因此您不需要任何特定於AngularUI的特性來實現所需的效果。
假設您的控制器中有一個值,該值指示按鈕是否處於活動狀態,並且是一個用於切換值的功能。它看起來是這樣的:
app.controller('MainCtrl', function($scope) {
$scope.isActive = false;
$scope.toggleActive = function() {
$scope.isActive = !$scope.isActive;
};
});
然後,您可以使用isActive
變量與ngClass指令在您的標記,以決定哪些類的使用方法:
<button type="button" class="btn" ng-class="{true: 'btn-primary', false: 'btn-default'}[isActive]" ng-click="toggleActive()">Upload</button>
在這種情況下,該按鈕當isActive
爲真時爲btn-primary
,當爲假時爲btn-default
。單擊該按鈕將調用切換功能,該功能將更新活動值並導致類更新。由於應始終應用btn
,因此將其從邏輯中移除並放入類屬性中。
這種方法還有一個好處,就是可以讓您的控制器邏輯保留您的CSS類。國際海事組織,這最終使控制器測試更脆弱,視圖更靈活。
您可以在Plunker的行動中看到它。
你只想按鈕跟着改變被點擊,而它?如果是這樣,你可能只需要一些CSS就可以做到這一點:'btn:active {...}' –
我希望它在未選中時爲白色,在選中時爲藍色。我試過這個,但它不起作用btn:active {background-color:blue; } – user3159568