I am trying to use ngTagInput with autocomplete but getting following Error:
angular.min.js:117 TypeError: a.filter is not a function
at d (ng-tags-input.min.js:1)
at ng-tags-input.min.js:1
at angular.min.js:130
at n.$eval (angular.min.js:144)
at n.$digest (angular.min.js:142)
at n.$apply (angular.min.js:145)
at l (angular.min.js:97)
at H (angular.min.js:101)
at XMLHttpRequest.u.onload (angular.min.js:102)
HTML
<tags-input ng-model="selectedList">
<auto-complete source="getData($query)"></auto-complete>
</tags-input>
Javascript
$scope.getData = function(query) {
var request = {
// GET request is defined here
};
return $http(request).success(function(response, status) {
var defer = $q.defer();
defer.resolve([
{ 'text': 'just' },
{ 'text': 'some' },
{ 'text': 'cool' },
{ 'text': 'tags' }
]);
return defer.promise;
});
};
You're using the success
method, that isn't chainable, i.e. it ignores return values, so the getData
function is, in fact, returning the $http
promise directly, which according to your Plunker, happens to resolve into an undetermined value, hence the filter is not a function
error, since the autoComplete
directive expects an array.
You should use then
instead of success
(you also don't need to create a new promise in order to return a value from inside another promise):
$scope.getData = function(query) {
...
return $http(request).then(function(response, status) {
return [
{ 'text': 'just' },
{ 'text': 'some' },
{ 'text': 'cool' },
{ 'text': 'tags' }
];
});
}
That'll work, but it doesn't make much sense because it issues a request and then discards its response. If you don't need to handle the response, you can simply return the http promise directly (assuming the response structure is valid for the directive):
$scope.getData = function(query) {
...
return $http(request);
};
Finally, both success
and error
methods have been deprecated. You should always use then
instead.