2014-01-30 260 views
1

我很難找出如何選擇從btn btn-default轉換爲btn btn-primary時使用的某些按鈕。我試圖讓它像這樣工作AngularUI按鈕的顏色變化onclick

$('#uploadButton').click(function() { 
$('#uploadButton').removeClass("btn btn-default"); 
     $('#uploadButton').addClass("btn btn-primary"); 
} 

但它不好。有人可以向我展示如何用AngularUI做到這一點?

+0

你只想按鈕跟着改變被點擊,而它?如果是這樣,你可能只需要一些CSS就可以做到這一點:'btn:active {...}' –

+0

我希望它在未選中時爲白色,在選中時爲藍色。我試過這個,但它不起作用btn:active {background-color:blue; } – user3159568

回答

1

你會想要使用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的行動中看到它。

0
(function() { 
    'use strict'; 

    angular 
    .module('app', []) 
    .directive('bootstrapBtn', bootstrapBtn); 

    function bootstrapBtn() { 
    return { 
     restrict: 'E', 
     replace: true, 
     template: '<button type="button" ng-class="test" class="btn" ng-click="add(1)">{{color}}</button>', 
     link: function(scope, elem, attrs) { 

     scope.counter = 0; 
     scope.test = "btn-defalult"; 
     scope.color = "default"; 

     scope.add = function(inc) { 
      scope.counter += inc; 
      switch (scope.counter) { 
      case 1: 
       scope.test = "btn-danger"; 
       scope.color = "danger"; 
       break 

      case 2: 
       scope.test = "btn-success"; 
       scope.color = "success"; 
       break 

      case 3: 
       scope.test = "btn-warning"; 
       scope.color = "warning"; 
       break 

      case 4: 
       scope.test = "btn-info"; 
       scope.color = "info"; 
       break 

      case 5: 
       scope.test = "btn-primary"; 
       scope.color = "primary"; 
       break 

      default: 
       if (scope.counter > 4) { 
       scope.test = "btn-defalult"; 
       scope.color = "default"; 
       scope.counter = 0; 
       } 
       break 

      } 
     }; 
     } 
    } 
    }; 
}()); 

您可以編寫指令,這樣Plunker