md-autocomplete 不显示 li 项目文本
md-autocomplete doesn't show li items text
我有一个 md-autocomplete 字段:
<md-autocomplete md-selected-item="videoInfo.lineUp[1]" md-items="item in searchQuery(searchText)" md-search-text="searchText" md-item-text="item.display"></md-autocomplete>
我用
填充md-items
$scope.searchQuery = function (searchText) {
var users = [];
angular.forEach($scope.users,
function (value, key) {
// value = user object
// key = userId
var dN = value["display_name"];
if (dN) {
var obj = {};
obj[key] = value;
obj["display"] = dN;
if (dN.toLowerCase().indexOf(searchText.toLowerCase()) !== -1) {
users.push(obj);
}
}
});
return users;
}
它的工作原理是我可以在输入字段中键入内容并加载建议,但是下拉列表是空的,即它没有像我预期的那样显示 display_name
。当我 select 其中一个选项时, selected 项目的 display_name
确实出现在输入字段中。知道我可能做错了什么吗?
您需要定义如何在 <md-autocomplete>
标签内的下拉列表中显示信息。这是一个例子 - CodePen
标记
<div ng-controller="AppCtrl as vm" ng-cloak="" ng-app="MyApp">
<md-autocomplete flex
md-selected-item="text"
md-no-cache="true"
md-items="item in vm.items()"
md-min-length="0">
<span id="autocompleteText" md-highlight-text="searchText">{{item}}</span>
</md-autocomplete>
</div>
我有一个 md-autocomplete 字段:
<md-autocomplete md-selected-item="videoInfo.lineUp[1]" md-items="item in searchQuery(searchText)" md-search-text="searchText" md-item-text="item.display"></md-autocomplete>
我用
填充md-items
$scope.searchQuery = function (searchText) {
var users = [];
angular.forEach($scope.users,
function (value, key) {
// value = user object
// key = userId
var dN = value["display_name"];
if (dN) {
var obj = {};
obj[key] = value;
obj["display"] = dN;
if (dN.toLowerCase().indexOf(searchText.toLowerCase()) !== -1) {
users.push(obj);
}
}
});
return users;
}
它的工作原理是我可以在输入字段中键入内容并加载建议,但是下拉列表是空的,即它没有像我预期的那样显示 display_name
。当我 select 其中一个选项时, selected 项目的 display_name
确实出现在输入字段中。知道我可能做错了什么吗?
您需要定义如何在 <md-autocomplete>
标签内的下拉列表中显示信息。这是一个例子 - CodePen
标记
<div ng-controller="AppCtrl as vm" ng-cloak="" ng-app="MyApp">
<md-autocomplete flex
md-selected-item="text"
md-no-cache="true"
md-items="item in vm.items()"
md-min-length="0">
<span id="autocompleteText" md-highlight-text="searchText">{{item}}</span>
</md-autocomplete>
</div>