md-autocomplete отображает результаты в виде списка вместо выпадающего - PullRequest
Новая
       28

md-autocomplete отображает результаты в виде списка вместо выпадающего

1 голос
/ 04 апреля 2019

Я пытаюсь использовать тэг Angular Material md-autocomplete для отображения предложений по почтовому индексу в моей форме.Я звоню в асинхронную службу, чтобы получить предложения и заполнить результаты.Я использовал демонстрационный код на https://material.angularjs.org/latest/api/directive/mdAutocomplete в качестве ссылки.Тем не менее, результаты отображаются как ul-li под моей формой.Может кто-нибудь помочь мне разобраться, что может пойти не так?Я включил необходимые файлы в мой HTML.Вот фрагменты кода: 

HTML

<!-- Angular Material requires Angular.js Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-messages.min.js"></script>

<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.12/angular-material.min.js"></script>

элемент ввода в форме 

<md-autocomplete flex
md-selected-item="selectedItem" 
md-search-text="searchText" 
md-items="x in query(searchText)"
md-item-display="x.display"
md-clear-button="false">
  <md-item-template>
    <span md-highlight-text="searchText">{{x}}</span>
  </md-item-template>
</md-autocomplete>

AngularJS Controller 

var app = angular.module("App", ['ngMaterial', 'ngMessages']);
app.controller("MainController", function ($scope, $http) {

    $scope.query = function(searchText) {
        return $http.get(BACKEND_URL + '/items/' + searchText)
          .then(function(response) {
             return response.data;
       });
    };
});

Я вызываю необходимый API из бэкэнда и получаюответ в виде массива.Это печатается и в консоли.Но окончательные результаты отображаются в виде списка под моей формой, например:

List of zipcodes shown instead of dropdown

1 Ответ

0 голосов
/ 04 апреля 2019

Вы должны добавить файл CSS angularjs. 

<link rel="stylesheet" href="//rawgit.com/angular/bower-material/master/angular-material.css">
...