AngleMaterial md-chips: do not show selected element in <md-autocomplete>
I am trying to use md-chips example<md-autocomplete>
To prevent the selected items from going inside <md-autocomplete>
, I changed the querySearch function as follows:
function querySearch (query) {
var results = query ? self.searchData.filter(createFilterFor(query)) : [];
var finalResults = [];
angular.forEach(results, function(result) {
if($scope.selectedItems.indexOf(result.name) < 0) {
finalResults.push(result);
updateSelectedItems(result);
}
});
return finalResults;
}
But my problem is that the control is not included in this function after the item is selected. Can someone please explain how to solve this?
source to share
I found a solution from this documentation: md-autocomplete
We just need to add md-no-cache="true"
to call the function querySearch
on every search for a query element
source to share
Solution that worked for me: Md-no-cache = "true" on md-autocomplete is still required to force autocomplete to reinitialize md elements; Md chips must have md-on-remove and md-on-append set and implement them to remove a chip from the list or add a chip to the list;
My code looks something like this HTML:
md-on-remove="removeTagChip($chip)"
md-on-append="appendTagChip($chip)"
JS:
$scope.removeTagChip = function (chip) {
var chipPos = $scope.getPosition(chip.Id, $scope.ChipTags);
if (chipPos < 0) {
$scope.ChipTags.push(chip);
}
};
$scope.appendTagChip = function (chip) {
var chipPos = $scope.getPosition(chip.Id, $scope.ChipTags);
if (chipPos > -1) {
$scope.ChipTags.splice(chipPos, 1);
}
return chip;
};
$ scope.getPosition just returns the position of the chip in the list of chips;
source to share