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

如何做到这一点用NG-options`？

How to do that using ng-options` ?

DEMO PLUNKR

DEMO PLUNKR

推荐答案

如果u想给颜色选项，然后你必须使用NG重复，而不是NG选项的设置，然后用NG-风格背景色..

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>

有关分组u需要修改数据如下

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>