Question

我有一个颜色的托盘，用方形按钮打开，如下所示：

  <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);
};

Answer 1

以下是如何更改按钮颜色的方法，如下所示，另请将此示例方案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
    }
};

根据托盘选择的颜色更改按钮颜色

1 个答案: