Saturday, August 18, 2018

Give styling to select option group

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

HTML:


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

Solved

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


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

 

No comments:

Post a Comment