HTML使用带有多个“默认”选项的ng-options进行选择

I am currently trying to make a drop down menu that runs off of a model but also has two "default" options that are at the top. Currently I have the following:

我目前正在尝试制作一个运行模型的下拉菜单,但也有两个位于顶部的“默认”选项。目前我有以下内容:

<select class="category-selector" chosen
        inherit-select-classes="true"
        ng-if="auction.category_options.length > 1"
        ng-model="auction.active_category"
        ng-options="g.label group by g.main_category for g in auction.category_options"
        ng-change="auction.active_category == null ? auction.clear_keyword_matching() : auction.refresh_matching_items()">
  <option value="" selected>Active items ({{auction.category_counts['Active'].total}})</option>
  <option value="all">All items ({{auction.category_counts['All'].total}})</option>
</select>

I am having trouble getting the "All items" option so show up in the dropdown. Is it not possible to declare two options and populate the rest using the ng-options / model?

我无法获得“所有项目”选项,因此会显示在下拉列表中。是否无法声明两个选项并使用ng-options / model填充其余选项?

Image of dropdown

1 个解决方案

#1

Adding extra option tags only works if you set value="" for the additional options

添加额外选项标签仅在为其他选项设置value =“”时才有效

<option value="" selected>...</option>

As soon as the value isn't empty, it will not show, as explain here. So you will probably need build this using ng-repeat.

一旦值不为空,它就不会显示,如此处所述。所以你可能需要使用ng-repeat来构建它。

In this answer, there is a solution using a directive, maybe that could work.

在这个答案中,有一个使用指令的解决方案,也许可行。

#1