Question

我正在努力实现前面的类型，所有似乎都在工作。唯一的问题是样式是错误的，它显示下拉，就像它将自动完成但它都是空白..值是在那里，事实上，如果你点击输入他们工作..但不是显示

我应该提一下，我正在使用AngularJS和Ionic ......

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

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 所以我知道它有效......

谢谢大家！

Answer 1

你真的需要与Ionic一起使用Bootstrap吗？

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

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

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

Answer 2

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

根据您的屏幕截图，您的代码行为似乎相同。也可以请你详细说明 - 当我点击进入它有效。当您按Enter键时，您认为Model:的值是什么？

UI Bootstrap预先输入空白下拉列表问题

2 个答案: