如何填充 md-autocomplete 下拉列表?
How to populate md-autocomplete dropdown list?
我正在尝试将 md-autocomplete 与 $http() 一起使用,我可以在控制台中看到这些值,但是我无法显示 return 从 api 请求中编辑的数据到自动完成。
我尝试使用 return 关键字将 return 值存储在 JSON 数组中。
<md-autocomplete
md-autoselect=true
placeholder="Search for films"
md-items="item in querySearch(searchText)"
md-item-text="item.title"
md-min-length="2"
md-search-text="searchText"
md-selected-item="selectedItem">
<md-item-template>
<span class="films-title">
<span md-highlight-flags="^i" md-highlight-text="searchText">
{{item.title}}
</span>
</span>
</md-item-template>
<md-not-found>
No match found.
</md-not-found>
</md-autocomplete>
我要显示的数据存储在一个JSON数组中,控制台可以看到内容:
'use strict';
filmApp.controller('SearchController',function ($scope, $http){
$scope.results = {
values: []
};
$scope.querySearch = function (query) {
$http({
url: 'https://api.themoviedb.org/3/search/movie?include_adult=false&page=1',
method: 'GET',
params: {
'query': query,
'api_key': apiKey
}
}).success(function (data, status) {
for (var i = 0; i < data.results.length; i++) {
$scope.results.values.push({title: data.results[i].original_title});
console.log($scope.results.values);
return $scope.results.values;
}
console.log("STATUS: "+status);
}).error(function (error) {
console.log("ERROR: "+error);
});
};
});
querySearch
方法应该 return 一个承诺 & 从 promise.then
你应该 returning 一个数据。因此,在您的情况下,您使用了 .success
/.error
回调(认为它们已经被弃用),这是不允许从您的 querySearch
方法
承诺 return
$scope.querySearch = function (query) {
return $http.get('https://api.themoviedb.org/3/search/movie?include_adult=false&page=1', {
params: {
'query': query,
'api_key': apiKey
}
}).then(function (data, status) {
var data= response.data;
for (var i = 0; i < data.results.length; i++) {
$scope.results.values.push({title: data.results[i].original_title});
console.log($scope.results.values);
}
return $scope.results.values;
})
};
我正在尝试将 md-autocomplete 与 $http() 一起使用,我可以在控制台中看到这些值,但是我无法显示 return 从 api 请求中编辑的数据到自动完成。 我尝试使用 return 关键字将 return 值存储在 JSON 数组中。
<md-autocomplete
md-autoselect=true
placeholder="Search for films"
md-items="item in querySearch(searchText)"
md-item-text="item.title"
md-min-length="2"
md-search-text="searchText"
md-selected-item="selectedItem">
<md-item-template>
<span class="films-title">
<span md-highlight-flags="^i" md-highlight-text="searchText">
{{item.title}}
</span>
</span>
</md-item-template>
<md-not-found>
No match found.
</md-not-found>
</md-autocomplete>
我要显示的数据存储在一个JSON数组中,控制台可以看到内容:
'use strict';
filmApp.controller('SearchController',function ($scope, $http){
$scope.results = {
values: []
};
$scope.querySearch = function (query) {
$http({
url: 'https://api.themoviedb.org/3/search/movie?include_adult=false&page=1',
method: 'GET',
params: {
'query': query,
'api_key': apiKey
}
}).success(function (data, status) {
for (var i = 0; i < data.results.length; i++) {
$scope.results.values.push({title: data.results[i].original_title});
console.log($scope.results.values);
return $scope.results.values;
}
console.log("STATUS: "+status);
}).error(function (error) {
console.log("ERROR: "+error);
});
};
});
querySearch
方法应该 return 一个承诺 & 从 promise.then
你应该 returning 一个数据。因此,在您的情况下,您使用了 .success
/.error
回调(认为它们已经被弃用),这是不允许从您的 querySearch
方法
$scope.querySearch = function (query) {
return $http.get('https://api.themoviedb.org/3/search/movie?include_adult=false&page=1', {
params: {
'query': query,
'api_key': apiKey
}
}).then(function (data, status) {
var data= response.data;
for (var i = 0; i < data.results.length; i++) {
$scope.results.values.push({title: data.results[i].original_title});
console.log($scope.results.values);
}
return $scope.results.values;
})
};