Angular Материал автозаполнения с вызовом $http

То, что я пытаюсь сделать, - это autocomplete материала Angular (md-autocomplete) с данные, динамически извлекаемые из обращения AJAX к моему REST API. К сожалению, я получаю только неопределенный индикатор выполнения вместо элементов автозаполнения, как вы можете видеть ниже.

Результат

контроллер

$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);
 });
}

Сервис

var selectsServiceFactory = {};
_getCustomers = function (query) {
 return $http.get(serviceBase + 'api/selects/customers/' + query)
 .then(function(results) {
 return results;
 });
}
selectsServiceFactory.getCustomers = _getCustomers;
return selectsServiceFactory;

Вид

<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> 
</md-autocomplete>

Я получаю данные успешно из API, потому что вижу, что он напечатан на консоли.

4 ответа

Используйте $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);
});
}


Наконец, я это сделал. Вот решение.


Я тоже боролся с этим. В итоге я делаю что-то вроде этого:

$scope.querySearch=function(searchTerm) {
 return $http({
 url:"http://mysearch.api?keyword="+searchTerm,
 method:"GET"
 })
 .then(function(res) {
 return res.data;
 }
}

Проблема для меня заключалась в том, что md-autocomplete нужно, чтобы результат был массивом, где ответ от $http является объектом. Я надеюсь, что это поможет кому-то еще!


Вы можете использовать Angularjs promises для получения данных из вызова $http.

<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>

licensed under cc by-sa 3.0 with attribution.