When attempting to search on the md-contact-chips, I encountered an error stating that createFilterFor is not a function. However, I have already created it as a function as shown below. Is there any way to resolve this issue?
Essentially, I am trying to replicate this demo, but instead of manually entering the contact names, I am retrieving existing data from my database using an http call to replace the contacts' names. This is demonstrated in the code snippet: Account.getTastes(). However, after displaying the retrieved data in the md-contact-chip as shown in the images below, the querySearch function stops functioning.
HTML:
<md-contact-chips required ng-model="tags" md-require-match md-contacts="querySearch($query)" md-contact-name="name" md-contact-image="image" filter-selected="true" placeholder="Thai, Chinese, cheap, cafe and etc">
</md-contact-chips>
Controller.js:
$scope.querySearch = querySearch;
$scope.filterSelected = true;
$scope.allContacts = loadContacts();
$scope.allContacts.then(function(contacts){
$scope.tags = [contacts[0],contacts[1]]
})
/**
* Search for contacts.
*/
function querySearch (query) {
var results = query ?
$scope.allContacts.filter(createFilterFor(query)) : [];
return results;
}
/**
* Create filter function for a query string
*/
function createFilterFor(query) {
var lowercaseQuery = angular.lowercase(query);
return function filterFn(contact) {
return (contact._lowername.indexOf(lowercaseQuery) != -1);;
};
}
function loadContacts() {
var contacts;
return Account.getTastes()
.then(function(res) {
contacts = res.data[0].tastes;
return contacts.map(function (c, index) {
var colors = ["1abc9c", "16a085", "f1c40f", "f39c12", "2ecc71", "27ae60", "e67e22","d35400","3498db","2980b9","e74c3c","c0392b","9b59b6","8e44ad","34495e","2c3e50"];
var color = colors[Math.floor(Math.random() * colors.length)];
var cParts = c.split(' ');
var contact = {
name: c,
image: "http://dummyimage.com/50x50/"+color+"/f7f7f7.png&text="+c.charAt(0)
};
contact._lowername = contact.name.toLowerCase();
return contact;
});
})
.catch(function(error) {
console.log("Error:"+error)
});
}