給樣式選擇選項組

Question

如何給樣式select選項組使用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" 
    }]; 

在上述例子中我想給定型到顏色（藍綠色&）。

如何使用ng-options`做到這一點？

DEMO PLUNKR

Answer 1

如果u想給顏色選項，然後你必須使用NG重複，而不是NG-選項然後用NG-樣式設置背景色...

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

用於分組u需要修改數據如下

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>