Question

我使用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>

现在我的客户想要动态地为不同的选项添加不同的颜色（option1为绿色，option2为红色，......）。

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

<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>

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

Answer 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

Answer 2

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

see this Plunker I've created for the exact solution

＆＃13;

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

＆＃13;

<!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>

＆＃13;

角度 - 下拉菜单背景颜色

2 个答案: