如何使用ngOptions

Question

我在下拉列表中使用ngOptions。由于我的下拉列表有很多选项，我想将下拉列表中的可见项限制为5.用户应该可以滚动到其余选项。

HTML

<select ng-model="model.year" ng-options="year for year in model.yearOptions"></select>

的Javascript

$scope.yearOptions = ["2017","2018","2019","2020","2021", "....","2050"];
$scope.model.year = "2017";

这不要与尺寸/ ng尺寸混淆，后者会扩大原始盒子本身的高度。

Answer 1

您可以设置选择选项的样式，但在浏览器中并不容易或一致。这是一篇关于这个主题的好文章：https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms#Dealing_with_the_select_nightmare

尝试为您的选择标记提供height和overflow属性。

示例：<select class="myClassName" ng-option="..."></select> ... .myClassName { height: 5em; overflow: auto;}

Answer 2

尝试使用limitTo过滤器：

<select ng-model="model.year" 
        ng-options="year for year in model.yearOptions | limitTo : 5"></select>

plunker：https://plnkr.co/edit/65l35x?p=preview

Answer 3

尝试添加size =＆＃34; 5＆＃34;

<select size="5" ng-model="model.year" ng-options="year for year in model.yearOptions"></select>