html - AngularJS:在调用它的按钮上应用动态类

Question

抱歉，标题可能令人困惑，但我想做的是根据按钮点击动态更改类。但是，这适用于除调用 changToRed 函数的 ons-button 之外的所有标签。

<div ng-controller="clickCtrl">
    <ons-button ng-class="dynamic" ng-click="changeToRed()">Red</ons-button>
</div>

这是我的 main.js 文件:

var myApp = angular.module('myApp');

myApp.controller('clickCtrl', function($scope){

$scope.dynamic = "blue";

$scope.changeToRed = function(){
  $scope.dynamic = "red";      
}

$scope.changeToGreen = function(){
  $scope.dynamic = "green";
}

$scope.changeToBlue = function(){
  $scope.dynamic = "blue";      
}

});

谢谢，本

Answer 1

ons-button 在内部使用 ng-class。如果您不需要微调器动画，您可以只使用类版本。

<button ng-class="dynamic" ng-click="changeToRed()" class="topcoat-button">Red</button>

您还需要将 !important 添加到您的 CSS。

.red {
    background-color: red !important;
}