Question

我需要实施angular js typeahead指令，以便根据特定国家/地区搜索城市。两者都应该是自动完成下拉列表。那是当我输入国家/地区文本框时，它应该在关键字i类型的下拉列表中向我显示国家/地区的建议。当我输入城市文本框时，它应该向我显示仅与所选国家/地区相关的城市建议。我已经为1个文本框实现了预先输入功能。现在我需要根据所选国家/地区搜索城市。

例如，如果我的json如下

$scope.data = [{
        countries: [{
                id: 1,
        name: country1
            }, 
        {
                id: 2,
        name: country2
                }, 
        {
                id: 3,
        name: country3
            }]
    cities: [{
            id: 1,
            city_name: 'city1'
        country_id: 1
        }, {
            id: 2,
            city_name: 'city2'
        country_id: 2
        }, {
            id: 3,
            city_name: 'city3'
        country_id: 2
        }, {
            id: 4,
            city_name: 'city4'
        country_id: 3
        }],


    }];

如果我在第一个文本框中选择了country2，那么在第二个文本框中它应该只显示city2和city3，因为它们属于country2

Answer 1

您可以使用过滤器。

将过滤器语法添加到html

<input ng-model="selectedCtry" 
    typeahead="ctry as ctry.name for ctry in data.countries"/>

<input ng-model="selectedCity" 
    typeahead="city as city.name for city in data.cities | filter:{ country_id: selectedCountry.id }"/>

示例 - http://codepen.io/jusopi/pen/jWyXeL?editors=101

Answer 2

在国家/地区文本框中，在模糊和传递国家/地区ID或国家/地区ID时调用服务器;并根据国家/地区获取城市列表

Angular js autocomplete typeahead

2 个答案:

将过滤器语法添加到html