Typeahead不会在下拉列表中显示文本

时间:2014-06-09 03:25:27

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

更新

Plunker demo here

原始问题

我已经设置了带有角度引导程序的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中键入文本时,我会看到返回的下拉列表中返回了相应数量的结果,但没有文本。左侧图像是首次出现下拉列表时,右侧图像是当鼠标悬停在其中一个选项上时。

enter image description here

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>

出了什么问题,如何解决这个问题?

3 个答案:

答案 0 :(得分:5)

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

首先,你不能只是通过类型选择提醒(123),你必须传递一个函数然后调用里面的警报(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);
};

这可能只是一个拼写错误,但您也可以在引号中选择输入。

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

修改

正如我在你的评论评论中所说,你的代码问题在于test.js,它看起来是你应该导入的1/3的缩小版本(/ /angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js)。包括完整版本可以解决您的问题。它也可能是旧版本或其他东西。对该文件的解释将是有用的。

答案 1 :(得分:2)

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

这是工作版plunker

答案 2 :(得分:0)

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

但是对于其他人:对我来说,看起来好像正在显示建议(否则下拉建议框会非常窄),但白色背景上的颜色是白色的。尝试在CSS文件中将字体更改为较暗的颜色。