angular bootstrap typeahead 不适用于 ng-change 检索到的动态列表答案

【问题标题】：angular bootstrap typeahead not working with a dynamic list retrieved by ng-changeangular bootstrap typeahead 不适用于 ng-change 检索到的动态列表
【发布时间】：2017-09-24 10:04:06
【问题描述】：

我正在使用 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 方法中，我更新了列表。我在控制台中打印列表并返回正确的值，但是下拉列表中未正确填充列表。我的 plunkr 是http://plnkr.co/edit/diot4RvsIdWht1zM3NeE?p=preview

谢谢

【问题讨论】：

能否请您分享整个
预输入所在的位置？
嗨@javier_el_bene，我更新了问题。

标签： angularjs angular-bootstrap angular-ui-typeahead

【解决方案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

【讨论】：

感谢@mahi-man，我想使用数组而不是 Promise 的原因是我不想在组件中添加 API 调用。当用户输入某事时，UI 组件会触发某个控制器的事件，当该控制器获取数据时，它会将它们发送回我的 UI 组件并显示在下拉列表中。
我认为您的设置中的问题是 typeahead 创建了它自己的范围，复制了数组中的数据，并且当数组由 async 函数更新时，typeahead 不知道它是总是落后一步。除了我原来的回答对不起，我不知道你怎么能实现你想要的。

【解决方案2】：

将此指令添加到您的input：

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

然后删除ng-change

最后，将onSelect 函数添加到您的作用域：

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

【讨论】：

感谢@nocodename，我删除了 ng-change，然后添加了 $watch 函数并调用 $scope.getLocationForSearch 但它似乎不起作用。
我找到了另一个解决方案。更新了我原来的答案。希望对您有所帮助。
我正在从 API 获取数据，但是当来自 api 的数据未在列表中更新时？你能推荐点什么吗？