[英]md-autocomplete displays results as a list instead of dropdown
我正在嘗試使用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控制器
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,並將響應作為數組獲取。 它也將在控制台中打印。 但是,最終結果將顯示為我的表單下方的列表,如下所示:
您應該添加angularjs材質的CSS文件。
<link rel="stylesheet" href="//rawgit.com/angular/bower-material/master/angular-material.css">
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.