3

我在同一个 Web 应用程序中使用 angular-ui 和 bootstrap,在尝试使用 ui-select2 组件时遇到问题:一切正常,除了在下拉列表中选择一个元素时,它没有显示在组件,它显示为空,尽管 ng-model 关联变量已正确更新。如果我从主页中删除 bootstrap.js 文件的包含,这种奇怪的行为就会消失。有没有人同时使用 angular-js 和 bootstrap 和/或知道任何调整以申请让它们一起工作?

更新:

ui-select2 组件位于 input-append div 中,只需删除 div 即可解决问题。我在这里创建了 Angular-ui ui-select2 原始沙盒演示的一个分支。您可以转到“版本 2”示例并检查在列表中选择一个值是否正确更新了模型,但没有更新输入元素。

4

1 回答 1

6

底线是您不能input-append在本机上与 Select2 一起使用。您放入 HTML 中的输入实际上将被隐藏,并且 Select2 注入了额外的 DOM 元素(div、列表和输入),所有这些元素都将被隐藏/显示,并且都有各自的 CSS。

您遇到的问题是由于 Bootstrap 和 Select2 之间的 CSS 冲突。

您应该考虑 A:不使用 input-append,B:重写或调整 CSS 以取消隐藏相关元素,C:使用 typeahead 或其他与 Bootstrap 的 CSS 配合得很好的解决方案。

您可以查看AngularUI Bootstrap 项目或查看这个 Plunker / Gist,它向您展示了如何使用 AngularUI Passthrough 指令运行 Bootstrap 指令。

于 2013-01-16T00:08:33.717 回答