UI Bootstrap typeahead空白下拉问题答案

【问题标题】：UI Bootstrap typeahead blank dropdown issueUI Bootstrap typeahead空白下拉问题
【发布时间】：2016-02-01 20:36:24
【问题描述】：

我正在尝试实现前面的类型，一切似乎都在工作。唯一的问题是样式有问题，它显示下拉菜单，就像它要自动完成一样，但它都是空白的.. 值在那里，事实上，如果你按 Enter，它们就可以工作.. 但没有显示

我应该提到我正在使用带有 Ionic 的 AngularJS...

我会把我的代码贴在这里以防万一。任何帮助都会很棒！

HTML：

<!-- UI BootStrap style sheet and js -->
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.4.0.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class='container-fluid' >
    <pre>Model: {{Selected| json}}</pre>
    <!-- <input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue"> -->
    <input type="text" ng-model="Selected" typeahead="Unidade.Codigo as Unidade.Nome for Unidade in Unidades | filter:$viewValue | limitTo:8" class="form-control" />
</div>

和 Javascript.. 我怀疑这是问题，但不会受到伤害

 $scope.Selected = undefined;
  $scope.Unidades = [{
        "Nome": "laskjdhflksjfg",
        "Codigo": "11106600"
    },
    {
        "Nome": "wertwertwertwer",
        "Codigo": "11106601"
    },
    {
        "Nome": "wertwertwertwer",
        "Codigo": "11106602"
    }];

我实际上是从这里复制了这个例子：http://plnkr.co/edit/1Sm17103S73nJbpb2PmK?p=preview 所以我知道它有效....

谢谢各位！

【问题讨论】：

检查您的 CSS 导入顺序并使用开发工具检查输入，以验证是否应用了正确的 CSS 并且未被覆盖。
它在我的台式机上，所以我回家后必须检查一下，但如果我发现我的 CSS 被覆盖是唯一改变导入顺序的补救措施吗？
感谢您的回复！

标签： css angularjs twitter-bootstrap ionic-framework angular-ui-bootstrap

【解决方案1】：

你真的需要 Bootstrap 和 Ionic 吗？

Ionic 论坛上有一些与该问题相关的帖子，例如https://forum.ionicframework.com/t/ionic-twitters-bootstrap-css-framework-again/8269/6

Bootstrap 的 CSS 类可能会干扰 Ionic 类。

为什么不使用Ionic Autocomplete 或其他类似组件？

【讨论】：

好。老实说，没有意识到这是一件事。谢谢！
我的意思是 UI Bootstrap Typeahead 看起来好 10 倍
但是您是否完成了自定义构建，包括仅包含在 ui-bootstrap 中的 uib-typeahead 组件？
不..我以前只用java开发所以很多这些东西都是新的..我该怎么做？除了预先输入的类之外，去掉css中的任何类吗？有没有更简单的方法
是的，转到angular-ui.github.io/bootstrap 并单击“创建构建”，只选择您想要的指令并下载您的自定义构建

【解决方案2】：

您能否确认这些值是否使用 Inspect Element 等进入 DOM 并发送屏幕截图。因为这通常发生在有 空字符串 时。就像在这个屏幕截图中一样。

根据您的屏幕截图，您的代码似乎表现相同。当您说时，您还可以详细说明-当我按Enter键时，它可以工作。当您按下回车键时，您看到的 Model: 值是什么？

【讨论】：