Give styling to select option group

Question

How to give a styling to select option group using ng-options ?

HTML:

<select ng-model="filteredBy" ng-options="obj_data.value as obj_data.title group by obj_data.group for obj_data in data"></select>

JS:

  $scope.filteredBy = 'true';
    $scope.data = [{
      "group": "byStatus",
      "title": "ACTIVE",
      "value": "false"
    }, {
      "group": "byStatus",
      "title": "COMPLETED",
      "value": "true"
    }, {
      "group": "byColor",
      "title": "Blue",
      "value": "#27a9e3"
    }, {
      "group": "byColor",
      "title": "Green",
      "value": "#28b779"
    }];

In the above example i want to give styling to color (Blue & Green).

How to do that using ng-options` ?

DEMO PLUNKR

Answer 1

if u want to give color to option then you have to use ng-repeat instead of ng-option then set the background-color using ng-style...

<select ng-model="filteredBy">
  <option ng-repeat="val in data" ng-style = "{'background':val.value}" >{{val.title}}</option>     
</select>

for grouping u need to modify data as below

js

$scope.filteredBy = 'true';
$scope.data = [{
  'group': 'byStatus',
  'content':[{'title': 'ACTIVE','value': 'false'}, {'title': 'COMPLETED','value': 'true'
}]}, {
  'group': 'byColor',
  'content':[{'title': 'Blue','value': '#27a9e3'}, {'title': 'Green',
  'value': '#28b779'}]

}];

html

<select ng-model="filteredBy">
  <optgroup ng-repeat="val in data" label={{val.group}} >
    <option ng-repeat="v in val.content" ng-style = "{'background':v.value}" >{{v.title}}</option>
  </optgroup>
</select>