Question

我正在使用angular-bootstrap中的typeahead指令。我的问题是当用户更改输入时，我想触发ng-change事件以从服务器获取列表，然后过滤结果。之后我想看到用uib-typeahead填充的列表。为此，我使用数组$ scope.list来存储服务器的结果，然后将其传递给uib-typeahead

 <div class="input-group">
    <input type="text" class="form-control" ng-model="asyncSelected" placeholder="Search city or zip code" 
    ng-change="getLocationForSearch(asyncSelected)" 
    uib-typeahead="item for item in list" />
 </div>

在getLocationForSearch方法中，我更新列表。我在控制台中打印列表并返回正确的值，但下拉列表中未正确填充列表。我的傻瓜是http://plnkr.co/edit/diot4RvsIdWht1zM3NeE?p=preview

由于

Answer 1

您可以在没有ng-change的情况下将其作为typeahead指令的一部分：

<input type="text" class="form-control" ng-model="asyncSelected" placeholder="Search city or zip code"
    uib-typeahead="item for item in getLocationForSearch($viewValue)" />

然后从getLocationForSearch函数返回列表。这是一个工作的plunker：

http://plnkr.co/edit/795euBYoCKxwzORoT2Hp?p=preview

Answer 2

将此指令添加到input：

<input ... typeahead-on-select="onSelect($item, $model, $label)" />

然后删除ng-change

最后，将onSelect函数添加到您的范围：

$scope.onSelect = function($item, $model, $label) {
    // do whatever you like
}

angular bootstrap typeahead不能使用ng-change检索的动态列表

2 个答案: