Question

我正在使用REST国家/地区的网络服务，当用户开始输入输入字段时，以及选择某个国家/地区显示有关该信息的信息时，我希望拥有自动填充功能。想要与工厂或指令一起做，不知道什么解决方案是最好的这就是我现在所拥有的：

HTML：

<div class="container" ng-controller="CountriesController">
    <h3 id="title">Countries Database</h3>
    <input type="text" id="countrySearch" ng-model="selected" typeahead="country for country in countries | limitTo:8" />

    <ng-view></ng-view>
</div>

模板：

<div ng-controller="CountriesController">
<ul>
    <li ng-repeat="country in countries" id="countryInfo">
        <p><b>Country:</b> {{country.name}}</p>
        <p><b>Native Name:</b> {{country.nativeName}}</p>
        <p><b>Capital:</b> {{country.capital}}</p>
        <p><b>Region:</b> {{country.region}}</p>
        <p><b>Subregion:</b> {{country.subregion}}</p>
        <p><b>Borders:</b> {{borders}}</p>
        <p><b>Languages:</b> {{languages}}</p>
        <p><b>Population:</b> {{country.population}} people</p>
        <p><b>Area:</b> {{country.area}} sq.km</p>
        <p><b>Currencies:</b> {{currencies}}</p>
        <p><b>Timezones:</b> {{timezones}}</p>
        <p><b>Calling Code:</b> +{{callingCodes}}</p>
    </li>
</ul>

控制器：

app.controller('CountriesController', function ($scope, CountriesFactory) {

CountriesFactory.getCountry().then(function (data) {
    $scope.selected = undefined;
    $scope.countries = data;
    console.log($scope.countries);

    $scope.timezones = data[0].timezones.toString();
    $scope.languages = data[0].languages.toString();
    $scope.currencies = data[0].currencies.toString();
    $scope.borders = data[0].borders.toString();
    $scope.callingCodes = data[0].callingCodes.toString();
});

});

工厂：

app.factory('CountriesFactory', function ($http, $q) {
return {
    getCountry: function () {
        var input = $('#countrySearch').val();
        var request = 'https://restcountries.eu/rest/v1/name/';
        var url = request + input;

        return $http.get(url);
    }
}
});

Answer 1

结帐bootstrap UI's autocomplete widget

查看the source code以了解其实施方式

Answer 2

如果您在此处转到rest countries，则可以看到如何获取其他国家/地区的示例：example restcountries.eu/rest/v1/name无效，因为他们不会曝光该页面。

尽量确保输入内容。尝试检查是否

$('#countrySearch').val();

首先不为null或为空。

AngularJS从Web服务自动完成

2 个答案: