我有一个颜色托盘，点击一个方形按钮打开，如下所示：
<div class="dropdown color-picker-dd">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"></button>
<div class="container dropdown-menu">
<div class="row">
<div class="col-sm-3">
<span class="color-preview" ng-click="updateOutputColor('#b60205')" ng-style="{'background-color': '#b60205'}"></span>
</div>
<div class="col-sm-3">
<span class="color-preview" ng-click="updateOutputColor('#d93f0b')" ng-style="{'background-color': '#d93f0b'}"></span>
</div>
<div class="col-sm-3">
<span class="color-preview" ng-click="updateOutputColor('#fbca04')" ng-style="{'background-color': '#fbca04'}"></span>
</div>
<div class="col-sm-3">
<span class="color-preview" ng-click="updateOutputColor('#0e8a16')" ng-style="{'background-color': '#0e8a16'}"></span>
</div>
</div>
</div>
</div>
我想将按钮颜色更改为从托盘中挑选的颜色。
更新：JS：
// Update output color.
$scope.updateOutputColor = function (color) {
ProjectService.editProjectOutputColor($scope.project, color).then(function () {
$scope.switchOutputColor(color);
});
};
// Output color swticher.
$scope.switchOutputColor = function (color) {
// if color is empty or undefined, fallback to original css.
if ((color === '') || (color === null) || (color === undefined)) {
color = '';
}
$scope.outputFontColor = {'color': color};
document.styleSheets[document.styleSheets.length - 1].addRule('.output-header i:before', 'color: ' + color);
};
以下是更改按钮颜色的方法，如下所示，还可以查看此plunker以获取示例场景作为示例。
模板：
<button class="btn-default" ng-style="customStyle" type="button" data-toggle="dropdown">Change My Color</button>
控制器：
$scope.updateOutputColor=function(colorName){
$scope.customStyle={
'background-color': colorName
}
};
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句