使用$ http调用Angular Material自动完成
[英]Angular Material autocomplete with $http call
问题描述
What i'm trying to do is an Angular Material autocomplete ( md-autocomplete ) with data dynamically retrieved from an AJAX call to my REST API. 
我正在尝试做的是Angular Material自动完成（ md-autocomplete ），其中数据是从对我的REST API的AJAX调用中动态检索的。 Unfortunately I get only indeterminate progress bar instead of autocomplete items as you can see below. 不幸的是，我只获得了不确定的进度条而不是自动完成项，如下所示。
Result 结果
Controller 调节器
$scope.customersSelect = {};
$scope.selectedItem = null;
$scope.searchText = null;
$scope.getCustomers = function (query) {
selectsService.getCustomers(query).then(function (results) {
$scope.customersSelect = results.data;
console.log($scope.customersSelect);
}, function(error) {
alert(error.data.message);
});
}
Service 服务
var selectsServiceFactory = {};
_getCustomers = function (query) {
return $http.get(serviceBase + 'api/selects/customers/' + query)
.then(function(results) {
return results;
});
}
selectsServiceFactory.getCustomers = _getCustomers;
return selectsServiceFactory;
View 视图
<md-autocomplete md-floating-label="Klient"
autocomplete="off"
flex=""
md-search-text-change="getCustomers(searchText)"
md-item-text="item"
md-items="item in customersSelect"
md-search-text="searchText"
md-selected-item="machine.customerId"
md-input-maxlength="100"
md-input-minlength="2"
md-input-name="machineOwner">
<md-item-template>
<span md-highlight-text="searchText">{{item}}</span>
</md-item-template>
I'm getting the data successfully from the API, because I can see it printed in the console. 我从API中成功获取数据，因为我可以在控制台中看到它。
4 个解决方案
解决方案1
13 已采纳 2015-11-22 15:25:35
(function() { 'use strict'; angular .module('MyApp') .controller('DemoCtrl', DemoCtrl); function DemoCtrl($http) { var self = this; self.data = null; self.selectedItem = null; self.searchText = null; self.querySearch = function (query) { $http.get('http://www.omdbapi.com/?s=' + escape(query)) .then(function(result) { self.data = result.data.Search; return result.data.Search; }); } } })();
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>$http md-Autocomplete</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"> <link rel='stylesheet prefetch' href='https://cdn.gitcdn.xyz/cdn/angular/bower-material/v1.0.0-rc4/angular-material.css'> </head> <body> <div class="autocompletedemoFloatingLabel" ng-controller="DemoCtrl as ctrl" ng-app="MyApp" layout="column" ng-cloak=""> <md-content class="md-padding"> <form name="searchForm" ng-submit="$event.preventDefault()"> <div layout-gt-sm="row"> <md-input-container flex=""> <label>Name</label> <input type="text"> </md-input-container> <md-autocomplete md-floating-label="Favorite movie" flex="" md-item-text="item.Title" md-items="item in ctrl.data" md-search-text-change="ctrl.querySearch(ctrl.searchText)" md-search-text="ctrl.searchText" md-selected-item="ctrl.selectedItem" md-no-cache="ctrl.noCache" md-input-maxlength="30" md-input-minlength="2" md-input-name="autocompleteField" required=""> <md-item-template> <span md-highlight-text="ctrl.searchText">{{item.Title}}</span> </md-item-template> <div ng-messages="searchForm.autocompleteField.$error" ng-if="searchForm.autocompleteField.$touched"> <div ng-message="required">You <b>must</b> have a favorite movie.</div> <div ng-message="minlength">Your entry is not long enough.</div> <div ng-message="maxlength">Your entry is too long.</div> </div> </md-autocomplete> </div> </form> </md-content> </div> <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.js'></script> <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-animate.min.js'></script> <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-route.min.js'></script> <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-aria.min.js'></script> <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-messages.min.js'></script> <script src='https://cdn.gitcdn.xyz/cdn/angular/bower-material/v1.0.0-rc4/angular-material.js'></script> <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js'></script> </body> </html>
Finally I have done it. 最后我做到了。 Here is the solution. 这是解决方案。
解决方案2
0 2017-04-23 13:23:39
I struggled with this as well. 我也在努力解决这个问题。 I end up doing something like this: 我最终做了这样的事情：
$scope.querySearch=function(searchTerm) {
return $http({
url:"http://mysearch.api?keyword="+searchTerm,
method:"GET"
})
.then(function(res) {
return res.data;
}
}
Problem for me was that md-autocomplete need the result to be an array, where the response from $http is an object. 对我来说问题是md-autocomplete需要结果是一个数组，其中来自$ http的响应是一个对象。 I hope this help someone else!! 我希望这有助于别人！
解决方案3
0 2018-01-09 11:12:22
You can use Angularjs promises to get data from $http call. 您可以使用Angularjs承诺从$ http调用中获取数据。
<body>
<form name="searchForm" ng-submit="searchForm.$valid && submit()" novalidate>
<md-autocomplete flex-gt-sm="35"
required md-input-name="autocompleteField"
md-input-maxlength="80"
md-selected-item="selectedItem"
md-search-text="formdata.searchText"
md-items="item in querySearch(formdata.searchText)"
md-item-text="item.display"
md-min-length="0"
md-floating-label="Get Values">
<md-item-template>
<span md-highlight-text="formdata.searchText" md-highlight-flags="^i">{{item.display}}</span>
</md-item-template>
<md-not-found>
No data matching "{{formdata.searchText}}" were found.
</md-not-found>
<div ng-messages="searchForm.autocompleteField.$error" ng-if="searchForm.autocompleteField.$touched">
<div ng-message="required">Please <b>select</b> Pricing model id.</div>
</div>
</md-autocomplete>
</form>
</body>
<script>
var getdataList= getData().then(function(greeting) {
$scope.getdataList = greeting;
})
$scope.querySearch = querySearch;
function querySearch(query) {
var results = query ? $scope.getdataList.filter(createFilterFor(query)): $scope.getdataList, deferred;
return results;
}
function getData() {
deferred = $q.defer();
$http.get(url).then(function(response) {
var responseList = response.map(function (task) {
return {value: task.dataname, display:task.dataname};
});
deferred.resolve(responseList);
},function myError() {
console.log("Error")
});
return deferred.promise;
}
function createFilterFor(query) {
var lowercaseQuery = query.toLowerCase();
return function filterFn(state) {
var lowercaseState = state.value.toLowerCase();
return (lowercaseState.search(lowercaseQuery) >= 0);
};
}
</script>
解决方案4
-1 2015-11-22 12:25:42
Use $apply to kick a digest cycle yourself, it will update the view. 使用$ apply自行启动摘要周期，它将更新视图。
$scope.getCustomers = function (query) {
selectsService.getCustomers(query).then(function (results) {
$scope.customersSelect = results.data;
$scope.$apply();
console.log($scope.customersSelect);
}, function(error) {
alert(error.data.message);
});
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
单击md-autocomplete（Angular Material）的“X”时调用函数 - Call a function when clicking on the “X” of md-autocomplete (Angular Material)
无法从 angular 材料自动完成中的 [displayWith] 调用另一个方法 - unable to call another method from [displayWith] in angular material autocomplete
角材料 textarea 自动完成 - Angular material textarea autocomplete
角材料自动完成不起作用 - Angular Material autocomplete not working
角度材质选项卡和自动完成 - Angular Material Tabs and autocomplete
角材料自动完成增强 - angular material autocomplete enhancement
从“自动完成”下拉选项中选择“材质自动完成角停止Api调用” - Material Autocomplete Angular Stopping Api Call when Selected From the Autocomplete Dropdown options
角材料自动完成：测试事件 - Angular material autocomplete: testing events
无限滚动用于Angular Material 6中的自动完成 - Infinite scroll for autocomplete in Angular Material 6
角材料自动完成-选择时搜索 - Angular Material Autocomplete - Searches on Select
相关标签