Bootstrap3 + Angular with Select 导致下拉菜单被切断

Question

我正在尝试使用 HTML Select 标记以及 AngularJs 使用 ng-options 指令来创建下拉选项菜单。除此之外，我正在使用 Bootstrap 3。我还将 ui-bootstrap 导入到项目中。

一切正常，但我有一个奇怪的问题，当用户在访问页面后第一次打开 Select 下拉菜单时，下拉菜单中的最后一个选项被切断，如图所示:

一旦用户 select 再次 select 下拉菜单，所有内容都会正确显示。

这是我使用的代码：

<!-- Select -->
        <div class="form-group">
            <label class="col-md-4 control-label" for="selectThemePark">Theme Park</label>
            <div class="col-md-4">
                <select id="selectThemePark" name="selectThemePark" class="form-control"
                        ng-model="tip.theme_park_id"
                        ng-options="themepark.id as themepark.theme_park_name for themepark in all_themeparks | orderBy:'+theme_park_name'">
                </select>
            </div>
        </div>

我不是专业的网络开发人员，所以我不确定 HTML select 标签是否有问题，或者是否有 CSS Bootstrap 3 中的 quirk 我需要覆盖 Select 标签？关于可能导致此行为的原因的任何指示？

Answer 1

我曾经使用 bootstrap 和 angular 围绕下拉菜单。据我所知，部分问题与 javascript 在页面呈现后与 DOM 交互有关。请记住 angular/js 在呈现 DOM 之后应用。它在点击事件后工作的原因是因为菜单正在刷新并重建 DOM 以说明注入的项目（选项）。对于下拉菜单，这对我来说是个大问题。我为更正此问题所做的一件事是使用 angular transclude. This allows me to attach the menu at the time angular is initialized. You may want to give the transclude directive a look. There are a number of blogs and articles out there discussing this topic. Just search for bootstrap angular drop down transclude. There is also a SO question around drop downs not working in angular here 在 angular 指令中构建我的 menus/navigation。希望这能帮助您走上正轨。

Bootstrap3 + Angular with Select 导致下拉菜单被切断

Bootstrap3 + Angular with Select causes the drop down to cut off

angularjs

html

twitter-bootstrap-3

html-select

ng-options