【问题标题】：Typeahead doesn't display text in dropdownTypeahead 不在下拉列表中显示文本
【发布时间】：2014-06-09 03:25:26
【问题描述】：

更新

Plunker 演示 here.

原始问题

我已经使用 angular bootstrap 设置了 typeahead。一切正常，期望不显示任何文本。

我的html...

<input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue"></input>

我的 JS...

angular.module('controllers')

.controller('BudgetTrackersCtrl', ["$scope", function($scope) {

  $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];

}]);

我的控制台没有返回任何错误。

当我在 inpt 中输入文本时，我看到下拉列表返回了适当数量的结果，但没有文本。左图是下拉菜单首次出现时，右图是我的鼠标悬停在其中一个选择上时。

li的html如下：

<li ng-repeat="match in matches" ng-class="{active: isActive($index) }" ng-mouseenter="selectActive($index)" class="ng-scope active">
  <a tabindex="-1" ng-click="selectMatch($index)" ng-bind-html-unsafe="match.label | typeaheadHighlight:query"></a>
</li>

出了什么问题，我该如何解决？

【问题讨论】：

有人可以向我解释为什么这被否决了吗？我做错了什么？我没有提供足够的信息。简单地投反对票对我或其他开发人员没有好处。

标签： javascript css angularjs typeahead.js bootstrap-typeahead

【解决方案1】：

查看对 Bootstrap-UI 的 plunker 的修改：http://plnkr.co/edit/Ow7G9ZcHfAvdxPYo7OPz?p=preview

首先，你不能只传递 typeahead-on-select alert(123)，你必须传递一个函数，然后在里面调用 alert(123)。

<input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control" typeahead-on-select="callback()">

JS：

$scope.callback = function () {
  alert(123);
};

这可能只是一个错字，但您也可以在引号中使用 typeahead-on-select。

除此之外，它应该像我链接到的 plunker 一样工作。如果这对您没有帮助，您需要自己制作一个，我们可以查看。

编辑

正如我在您启动 plunker 后对您的评论的评论中所说的那样，您的代码的问题在于 test.js，它看起来是您应该导入的大约 1/3 的缩小版本（/ /angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js）。包括完整版可以解决您的问题。它也可能是旧版本或其他东西。解释该文件是什么会很有用。

【讨论】：

忘记在选择时预先输入，它仍然不起作用。考虑到我习惯于遗忘的 css/js 资产，创建一个 plunker 是不可能的。如果我将我的代码复制并粘贴到一个 plunker（例如你的）它就可以工作。
我现在实际上有一个工作的 plunker plnkr.co/edit/vPIrNQcxBbQZHvilZ5Zo?p=preview
test.js 有什么用？看起来它只是 bootstrap-ui 的缩小版本（除了我刚刚注意到它大约是原来的一半）。如果您将 test.js 的引用替换为，它会起作用。

【解决方案2】：

您忘记将//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js 添加为脚本。

这是工作版本plunker

【讨论】：

【解决方案3】：

我知道这可以追溯到半年前，希望您自己已经解决了这个问题。

但对于其他所有人：对我来说，似乎正在显示建议（否则下拉建议框会很窄），但颜色是白色背景上的白色。尝试在 CSS 文件中将字体更改为较深的颜色。

【讨论】：