Question

我在选择下拉菜单中使用ng-options。我想根据条件使用不同颜色的选项：

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

有可能吗？

编辑（我的玉代码）：

 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]")

Answer 1

如果您只需要将select绑定到字符串值（而不是对象），则可以使用ngRepeat ed <option>元素（而不是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>

如果你有一个小的自定义指令，你可以像这样实现它：

app.directive('optionClassExpr', function ($compile, $parse) {
    var NG_OPTIONS_REGEXP = /^\s*([\s\S]+?)(?:\s+as\s+([\s\S]+?))?(?:\s+group\s+by\s+([\s\S]+?))?\s+for\s+(?:([\$\w][\$\w]*)|(?:\(\s*([\$\w][\$\w]*)\s*,\s*([\$\w][\$\w]*)\s*\)))\s+in\s+([\s\S]+?)(?:\s+track\s+by\s+([\s\S]+?))?$/;

    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);
                    }
                });
            });
        }
    };
});

并像这样使用它：

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

另请参阅此 updated short demo 。

Answer 2

定义CSS类：

.green {
    background-color: green;   
}

.blue {
    background-color: blue;
}

并使用函数作为角度表达式：

$scope.getCompanyClass = function(company)
{
   return company.active ? "green" : "blue";
}

并在你的HTML中：

<select>
    <option data-ng-repeat="company in companies" data-ng-class='getCompanyClass(company)'>...</option>
</select>

和工作示例为jsfiddle

Answer 3

对于特殊情况，您需要以特定颜色显示禁用选项的简洁解决方案。您可以使用disable when：

ng-options='c.code as c.name disable when !c.active for c in companies'

然后，您可以使用CSS匹配disabled属性，并按照您喜欢的方式设置相应选项的样式。

Answer 4

请参阅此处http://jsbin.com/wahak/2/edit?html,css,console,output您可以使用css

执行此操作

CSS：

select { color: red; }
option:not(:checked) { color: black; }

Answer 5

这就是我为ng-options着色的方法。我正在使用我自己的例子。

＆＃13;

var app = angular.module("app", []);
app.controller("homeController", [homeController]);

function homeController() {
    var vm = this;
    vm.differentOptions = [
        { name: "External Visitors", color: "Red" },
        { name: "Internal Visitors", color: "Green" },
        { name: "Other Visitors", color: "Gray" },
        { name: "Extrateresstrial Visitors", color: "Yellow" }
    ];
}

angular.module("app").directive("colorTheOptions", colorTheOptions);
function colorTheOptions($timeout) {
    return {
        link: function (scope, element) {
            $timeout(function () {
                var options = $("option", element);
                options.each(function (index, eachOption) {
                    $eachOption = $(eachOption);
                    var optionText = $eachOption.text();
                    if (optionText) {
                        for (var i = 0; i < scope.vm.differentOptions.length; i++) {
                            var eachAngularOption = scope.vm.differentOptions[i];
                            if (eachAngularOption.name === optionText) {
                                $eachOption.addClass(eachAngularOption.color);
                            }
                        }
                    }
                });
            });
        }
    }
}

＆＃13;

.Red {
    color: red;
}

.Green {
    color: green;
}

.Gray {
    color: gray;
}

.Yellow {
    color: yellow;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container" ng-app="app">
    <div class="row" ng-controller="homeController as vm">
        <select class="form-control" color-the-options
                ng-options="option.name for option in vm.differentOptions"
                ng-model="vm.selectedOption"></select>
    </div>
</div>

＆＃13;

自定义ng-options选择外观

5 个答案: