我正在尝试做的是Angular Material自动完成(
md-autocomplete),其中数据是从对我的REST API的AJAX调用中动态检索的.不幸的是,我只获得了不确定的进度条而不是自动完成项,如下所示.
结果
调节器
$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>
我从API中成功获取数据,因为我可以在控制台中看到它.
解决方法
(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>
最后我做到了.这是解决方案.