Bootstrap3 + Angular with Select导致下拉切断

Question

我正在尝试使用HTML Select标签和AngularJs，使用ng-options指令创建一个下拉选项菜单。最重要的是我使用Bootstrap 3.我也将ui-bootstrap导入到项目中。

一切都在功能上有效但我有一个奇怪的问题，当用户在访问页面后第一次打开“选择”下拉列表时，下拉菜单中的最后一个选项将被截断，如下图所示：

一旦用户选择了某些内容并再次选择了下拉菜单，那么一切都会正常显示。

以下是我正在使用的代码：

<!-- 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选择标记是否有问题，或者如果Bootstrap 3中有一个CSS怪癖我需要覆盖Select标签？什么可能导致这种行为的指针？

Answer 1

我有时间在下拉菜单中使用带有角度的引导程序。从我所看到的问题的一部分与页面渲染后与DOM交互的javascript相关联。记住在渲染DOM之后应用angular / js。它在click事件之后工作的原因是因为菜单刷新并重建DOM以考虑注入的项目（选项）。这对我来说是一个巨大的问题。我做的一件事是纠正这个使用angular transclude在角度指令中构建我的菜单/导航。这允许我在初始化角度时附加菜单。您可能想要查看transclude指令。有很多博客和文章在讨论这个主题。只需搜索bootstrap angular drop down transclude即可。还有一个关于下拉的SO问题不适用于角here。希望这有助于您走上正轨。