角度引导程序提前无法与ng-change检索到的动态列表一起使用 [英] angular bootstrap typeahead not working with a dynamic list retrieved by ng-change

查看:45
本文介绍了角度引导程序提前无法与ng-change检索到的动态列表一起使用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I am working with typeahead directive in angular-bootstrap. My problem is when user change the input, I want to trigger a ng-change event to get the list from the server, then filter the results. After that I want to see the list to be populated with uib-typeahead. For that, I am using an array $scope.list to store the result from the server and then I pass it into uib-typeahead as

 <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

In the getLocationForSearch method, I update the list. I print the list in the console and it return correct value, however the list is not populated correctly in the dropdown. My plunkr is http://plnkr.co/edit/diot4RvsIdWht1zM3NeE?p=preview

谢谢

推荐答案

您可以将其作为typeahead指令的一部分进行操作,而无需进行ng-change:

You can do it as part of the typeahead directive without ng-change:

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

然后从 getLocationForSearch 函数返回列表.这是一个工作正常的人:

And then just return the list from the getLocationForSearch function. Here is a working plunker:

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

这篇关于角度引导程序提前无法与ng-change检索到的动态列表一起使用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆