Angular - dropdown menu background color

Question

I have this code in html using 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>

Now my client want to put different color for different options dynamically(option1 is green, option2 is red,...).

I googled and test with some code:

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

and

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

Both of the above not working. How can I achieve that?

You want the <select> tag, to change its background color depending on the selected option? — Frondor
– Frondor, Commented Jul 17, 2016 at 8:24

Sajal · Accepted Answer · 2016-07-17 08:35:40Z

3

You would have to assign a color property to incoming array, then use ng-style to bind that color to the option.

<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

answered Jul 17, 2016 at 8:35

Sajal

4,4111 gold badge22 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

sooon Over a year ago

I tested this and it only works with Firefox but not in Chrome and Safari. Is there something else I need to do to get this to work?

Sajal Over a year ago

The plunker works for me in firefox and chrome. I dont have safari to test it, but it should work fine there as well. See console for more.

sooon Over a year ago

Is it because I am using Mac?

Raman Sahasi · Accepted Answer · 2016-07-17 08:53:38Z

There can be many ways, I would recommend that you specify a color attribute in the data itself and then set the background color according to that data.

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="[email protected]" 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>

Collectives™ on Stack Overflow

Angular - dropdown menu background color

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related