由网友(一身傲气王)分享简介：我使用一个选择下拉菜单中纳克选项。我想用不同的颜色可以根据条件选择一个选项： 选择（NG-模式='myCompany中'，NG选项='公司code作为company.name为公司的公司。**如果company.active - ＆GT ;文本颜色=绿色**） 是否有可能这样做吗？编辑（我的玉code）： 形式（角色...

我使用一个选择下拉菜单中纳克选项。我想用不同的颜色可以根据条件选择一个选项：

 选择（NG-模式='myCompany中'，NG选项='公司code作为company.name为公司的公司。**如果company.active  - ＆GT ;文本颜色=绿色**） 

是否有可能这样做吗？

编辑（我的玉code）：

 形式（角色='形式'，名字='addForm'，NOVALIDATE，RC-提交=增加（））    .FORM组        div.row            div.col-XS-12.col-MD-3                select.form控制（NG-模式='form.contract'，NG选项=，期权类=作为contract.number在合同契约合同{真：积极的，假的：无效} [活性]） 

解决方案

如果您只需要选择绑定到字符串值（不是对象），就可以轻松实现你想要什么用 ngRepeat ED ＆LT;选项＆GT; 元素（而不是 ngOptions ）

 ＆LT;选择NG模型=色＆GT;    ＆LT;期权价值=＆GT; ---选择一种颜色---＆LT; /选项＆GT;    ＆LT;期权价值={{c}里}的风格=背景色：{{c}里}NG重复=C中的颜色＆GT;        {{C}}    ＆LT; /选项＆GT;＆LT; /选择＆GT; 

如果你是在一个小的自定义指令，就可以实现这样的：

  app.directive（'optionClassExpr'，函数（$编译，$解析）{    VAR NG_OPTIONS_REGEXP = /^s*([sS]+?)(?:s+ass+([sS]+?))?(?:s+groups+bys+([sS]+?))?s+fors+(?:([$w][$w]*)|(?:(s*([$w][$w]*)s*,s*([$w][$w]*)s*)))s+ins+([sS]+?)(?:s+tracks+bys+([sS]+?))?$/;    返回{        限制：'A'，        链接：功能optionClassExprPostLink（范围，ELEM，ATTRS）{            VAR optionsExp = attrs.ngOptions;            如果回报（optionsExp！）;            VAR匹配= optionsExp.match（NG_OPTIONS_REGEXP）;            如果回报（匹配！）;            VAR值=匹配[7];            VAR classExpr = $解析（attrs.optionClassExpr）;            范围。$ watchCollection（函数（）{                返回elem.children（）;            }，功能（newValue）以{                angular.forEach（为newValue，功能（子）{                    VAR孩子= angular.element（小孩）;                    变种VAL = child.val（）;                    如果（VAL）{                        child.attr（'纳克级'，值+'['+ VAL +。+                                               attrs.optionClassExpr）;                        $编译（子）（范围）;                    }                }）;            }）;        }    };}）; 

和使用这样的：

 ＆LT;选择NG模型=someObj中NG选项=OBJ作为obj.color为对象OBJ        期权类EXPR =色＆GT;＆LT; /选择＆GT; 

又见这个 更新简短演示

I'm using a ng-options for a select dropdown menu. I would like to use different color for an option depending on a condition:

select(ng-model='myCompany', ng-options='company.code as company.name for company in companies' **if company.active -> text-color=green**)

Is it possible to do that?

Edit (my jade code):

 form(role='form', name='addForm', novalidate, rc-submit="add()")
    .form-group
        div.row
            div.col-xs-12.col-md-3
                select.form-control(ng-model='form.contract', ng-options='contract as contract.number for contract in contracts', options-class="{true:'active',false:'inactive'}[active]")

解决方案

If you only need to bind the select to string values (not object), you can easily achieve what you want by using ngRepeated <option> elements (instead of ngOptions):

<select ng-model="color">
    <option value="">--- Select a color ---</option>
    <option value="{{c}}" style="background-color:{{c}}" ng-repeat="c in colors">
        {{c}}
    </option>
</select>

If you are in for a little custom directive, you can implement it like this:

app.directive('optionClassExpr', function ($compile, $parse) {
    var NG_OPTIONS_REGEXP = /^s*([sS]+?)(?:s+ass+([sS]+?))?(?:s+groups+bys+([sS]+?))?s+fors+(?:([$w][$w]*)|(?:(s*([$w][$w]*)s*,s*([$w][$w]*)s*)))s+ins+([sS]+?)(?:s+tracks+bys+([sS]+?))?$/;

    return {
        restrict: 'A',
        link: function optionClassExprPostLink(scope, elem, attrs) {
            var optionsExp = attrs.ngOptions;
            if (!optionsExp) return;

            var match = optionsExp.match(NG_OPTIONS_REGEXP);
            if (!match) return;

            var values = match[7];
            var classExpr = $parse(attrs.optionClassExpr);

            scope.$watchCollection(function () {
                return elem.children();
            }, function (newValue) {
                angular.forEach(newValue, function (child) {
                    var child = angular.element(child);
                    var val   = child.val();
                    if (val) {
                        child.attr('ng-class', values + '[' + val + '].' +
                                               attrs.optionClassExpr);
                        $compile(child)(scope);
                    }
                });
            });
        }
    };
});

And use it like this:

<select ng-model="someObj" ng-options="obj as obj.color for obj in objects"
        option-class-expr="color">
</select>

See, also, this updated short demo.