Angular - 下拉菜单背景颜色答案

【问题标题】：Angular - dropdown menu background colorAngular - 下拉菜单背景颜色
【发布时间】：2016-07-17 16:53:38
【问题描述】：

我在html 中有这段代码，使用Angular：

<select name="singleSelect" ng-model="priority.APME" style="width:100%;" ng-change="changedValue(priority.APME,$index,priority)" >
            <option value="" selected>Main Elements</option>
            <option ng-repeat="me in mainelements" value="{{$index}}" ng-disabled="me.optiondisable == true">{{me.Title}}</option>
          </select>

现在我的客户想要动态地为不同的选项设置不同的颜色（选项 1 是绿色，选项 2 是红色，...）。

我用谷歌搜索并测试了一些代码：

<option ng-repeat="me in main elements" style="background: #5456e3 !important;" value="{{$index}}" ng-disabled="me.optiondisable == true">{{me.Title}}</option>

和

<option ng-repeat="me in main elements" style="background-color: #5456e3 !important;" value="{{$index}}" ng-disabled="me.optiondisable == true">{{me.Title}}</option>

以上都不起作用。我怎样才能做到这一点？

【问题讨论】：

您希望<select> 标签根据所选选项更改其背景颜色？
可能重复stackoverflow.com/questions/16521565/…

标签： html css angularjs

【解决方案1】：

您必须为传入数组分配一个颜色属性，然后使用ng-style 将该颜色绑定到选项。

<select>
   <option value="" selected>Main Elements
   </option>
   <option ng-repeat="me in mainelements"
           ng-style ="{'background-color': me.Color}">{{me.Title}}
   </option>
</select>

Working Plunker

【讨论】：

我对此进行了测试，它仅适用于Firefox，但不适用于Chrome 和Safari。我还需要做些什么才能使其正常工作吗？
plunker 在 Firefox 和 chrome 中为我工作。我没有 Safari 来测试它，但它在那里也应该可以正常工作。有关更多信息，请参见控制台。
是因为我用的是Mac吗？

【解决方案2】：

有很多方法，我建议你在数据本身中指定一个color属性，然后根据该数据设置背景颜色。

see this Plunker I've created for the exact solution

angular.module('plunker', [])
.controller('MainCtrl', function ($scope) {
  $scope.fruits = [
    {name: 'Apple', color: '#5bb75b'},
    {name: 'Banana', color: '#08c'},
    {name: 'Cherry', color: 'yellow'},
  ];
  
  $scope.setBgColor = function() {
    $("#selectedFruit").css("background-color", JSON.parse($scope.selectedFruit).color);
  }
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.0.x" src="http://code.angularjs.org/1.0.7/angular.min.js" data-semver="1.0.7"></script>
    <script src="app.js"></script>
  </head>

<body ng-controller="MainCtrl">
  <select id="selectedFruit" ng-model="selectedFruit" style="background-color:{{JSON.parse($scope.selectedFruit).color}}" ng-change="setBgColor()">
    <option ng-repeat="sdata in fruits" style="background-color:{{sdata.color}}" value="{{sdata}}">{{sdata.name}}</option>
  </select>
</body>

</html>

【讨论】：