我正在尝试实现ngTagsInput,我想在其中实现电子邮件的自动搜索。 为此,我在下面写了代码。 但它不显示自动搜索结果
.HTML:
<tags-input ng-model="compose.receiver"
add-from-autocomplete-only="true"
min-length="1">
<auto-complete source="loadReceiver($query)"
min-length="0"
debounce-delay="0"
max-results-to-show="10"
loadOnEmpty="true">
</auto-complete>
</tags-input>
控制器:
$scope.loadReceiver = function(query){
return AdminInbox.loadReceiver(query);
}
服务:
angular.module('inboxes').factory('AdminInbox', ['$http','$q',
function($http,$q) {
return {
loadReceiver: function(query) {
console.log(query);
var deferred = $q.defer();
var receiver = $http.get('mailreceiver/'+query);
console.log(receiver);
return deferred.promise;
}
}
}
]);
我成功得到了以下格式的回复:
[{_id: "5579c9a4f3d71f8c2a4f1e3d" email: "abc@gmail.com"},
{_id: "557f2cd3a571f9a41e4168f2" email: "xyz@gmail.com"}]
有一个有效的 JSON 并设置display-property
它就可以工作了!
angular.module('app', ['ngTagsInput'])
.run(function($rootScope) {
$rootScope.source = [{
_id: "5579c9a4f3d71f8c2a4f1e3d",
email: "abc@gmail.com"
}, {
_id: "557f2cd3a571f9a41e4168f2",
email: "xyz@gmail.com"
}];
$rootScope.compose = {
receiver: []
};
});
<link rel="stylesheet" href="http://mbenford.github.io/ngTagsInput/css/ng-tags-input.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/2.3.0/ng-tags-input.js"></script>
<div ng-app="app">
<tags-input ng-model="compose.receiver" display-property="email" add-from-autocomplete-only="true" min-length="1">
<auto-complete source="source" min-length="0" debounce-delay="0" max-results-to-show="10" loadOnEmpty="true" displayProperty="email">
</auto-complete>
</tags-input>
</div>