AngularUI按钮的颜色变化onclick

我很难找出如何选择从btn btn-default转换为btn btn-primary时使用的某些按钮。我试图让它像这样工作AngularUI按钮的颜色变化onclick

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

但它不好。有人可以向我展示如何用AngularUI做到这一点？

来源

2014-01-30 user3159568

你只想按钮跟着改变被点击，而它？如果是这样，你可能只需要一些CSS就可以做到这一点：'btn：active {...}' –

我希望它在未选中时为白色，在选中时为蓝色。我试过这个，但它不起作用btn：active {background-color：blue; } – user3159568

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

来源

2014-01-31 05:35:09

(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

来源

2016-02-03 13:46:47

AngularUI按钮的颜色变化onclick

回答

相关问题