Автозаполнение AngularJS с веб-службы

0

Я использую веб-службу REST Countries, и я хочу иметь функцию автозаполнения, когда пользователь начинает вводить поле ввода, и когда какая-либо страна была выбрана для отображения информации об этом. Хотите сделать это с заводами или, может быть, с директивой, не знаете, какое решение лучше всего. Вот что я имею сейчас:

Ссылка сервиса REST: https://restcountries.eu/

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);
    }
}
});
  • 0
    Какая у вас ошибка? вы можете сделать печать экрана с ошибкой в консоли?
  • 0
    @ user2232187 только это, не может решить это. ПОЛУЧИТЬ restcountries.eu/rest/v1/name 404 (не найден)
Теги:

2 ответа

0

Если вы поедете в страны покоя, вы можете увидеть пример того, как получить остальные страны: например, Restcountries.eu/rest/v1/name не работает, потому что они не раскрывают эту страницу.

Постарайтесь убедиться, что у вас есть что-то на входе. Попробуйте проверить, если

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

сначала не является нулевым или пустым.

0

Виджет автозаполнения пользовательского бутстрапа

Посмотрите исходный код, чтобы увидеть, как он реализован.

  • 0
    Это уже реализовано в моем коде, но не работает с этим сервисом через фабрики

Ещё вопросы

Сообщество Overcoder
Наверх
Меню