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

jas*_*328 3 javascript css angularjs bootstrap-typeahead typeahead.js

UPDATE

这里有 Plunker演示.

原始问题

我已经设置了带有角度引导的先行者.一切正常,期望不显示任何文本.

我的HTML ...

<input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue"></input>
Run Code Online (Sandbox Code Playgroud)

我的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'];

}]);
Run Code Online (Sandbox Code Playgroud)

我的控制台没有返回错误.

当我在inpt中输入文本时,我会看到返回的下拉列表中返回了相应数量的结果,但是没有文本.左侧图像是首次出现下拉列表时,右侧图像是当鼠标悬停在其中一个选项上时.

在此输入图像描述

html li如下:

<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>
Run Code Online (Sandbox Code Playgroud)

怎么了,怎么解决这个问题?

Sgt*_*r43 5

看看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()">
Run Code Online (Sandbox Code Playgroud)

JS:

$scope.callback = function () {
  alert(123);
};
Run Code Online (Sandbox Code Playgroud)

这可能只是一个错字,但你也有引号中的typeahead-on-select.

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

编辑

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