如何使用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"
},"title": "Green","value": "#28b779"
}];
在上面的例子中,我想给颜色设置样式(蓝色和绿色).
如何使用ng-options`做到这一点？
解决方法
如果你想给选项赋予颜色,那么你必须使用ng-repeat而不是ng-option然后使用ng-style设置背景颜色…
<select ng-model="filteredBy">
<option ng-repeat="val in data" ng-style = "{'background':val.value}" >{{val.title}}</option>
</select>
对于分组,您需要修改数据,如下所示
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>
