AngularJS预先输入结果列表

时间:2015-10-07 19:05:06

标签: javascript angularjs typeahead

我有一个工作正常的预先输入,但我希望能够在文本与任何现有单词不匹配的情况下向结果列表添加文本,并且我希望此选项立即显示。

这在这里工作正常: http://plnkr.co/edit/Gy37Qo6DDusou2GaWMWv?p=preview

但是,在异步需要一些时间返回的情况下,结果列表在等待时为空。我想运行这一行,

的script.js:15: addresses.push({formatted_address: val+" (new)", geometry: "custom"});

在异步请求返回之前。

为了演示这不起作用,我更改了请求中的地址“http://maps.googleapis.com/maps/api/geocode/json”, 无效的东西。在这种情况下,即使我希望将书面文本视为建议,也不会显示任何内容。

我希望这是可以理解的!

1 个答案:

答案 0 :(得分:0)

您可以将addresses变量放在$scope上,然后在预先输入中,而不是从getLocation方法中读取,从而解决此问题。您需要对输入的更改进行更新,因此在输入上添加ng-change属性并从那里调用getLocation方法,并在ajax查询回调中,只需将结果附加到地址阵列。

<input 
    id="input"
    type="text" 
    ng-model="asyncSelected" 
    ng-change="getLocation()"
    placeholder="Locations loaded via $http" 
    typeahead="address as address.formatted_address for address in addresses" 
    typeahead-loading="loadingLocations" 
    class="form-control">

(注意:ngChange在解决这个问题上有一些问题,所以我建议你创建一个有些修改行为的自定义指令)。请在此处查看基本解决方案:http://plnkr.co/edit/dfb6PMLpFj6euFye4C8z?p=preview