Question

我在HTML中有一个select元素，它有一个ng-repeat属性为angular js，用于呈现可用的选项，如下面的代码片段所示 -

<select id="mySelect" ng-model="dummyModel" ng-init="dummyModel=0"                
                           ng-disabled="false" style="width:200px;">
                                <option value="0">--Select--</option>
                                <option ng-repeat="elem in list"
                                        value="{{elem.id}}">
                                    {{elem.description}}
                                </option>
                            </select>

我可以使用“style”属性设置选择下拉列表的宽度。但是，我无法将样式应用于选项元素。我想为所有选项元素设置200 px的固定宽度。我怎样才能做到这一点？任何建议都非常感谢。

注意：我已经尝试过如下使用CSS类，但它不起作用：（

#mySelect*
{
 width:200px;
}

另外，我尝试在选项标签上使用ng-style =“myOptionStyle（）属性，如下所示，但这也不起作用：（

<option ng-repeat="elem in list" value="{{elem.id}}"  
        ng-style="myOptionStyle()>
                      {{elem.description}}
</option>

和角度js控制器 -

 $scope.myOptionStyle = function () {
                return { 'width': '200px;' };
            };

提前致谢。

Answer 1

不幸的是，这是不可能的。操作系统是呈现<option>元素而不是HTML的操作系统，因此它更依赖于操作系统。

以下是MSDN的摘录：

除了background-color和color之外，通过option元素的样式对象应用的样式设置将被忽略。此外，直接应用于各个选项的样式设置将覆盖应用于整个包含的select元素的样式设置。

Answer 2

设置具有特定属性或属性值的HTML元素的样式。

选项[value] { 背景颜色：黄色; }

如何将样式应用于角度js中选择下拉列表的选项元素？

2 个答案: