Currently facing an issue with my code where creating a new chip triggers the label model to generate a name and ID.
The problem arises when trying to select an option from the dropdown menu. Instead of returning the label name, it returns an Object.
The UI snapshot reveals that the md-autocomplete dropdown displays the name correctly. However, upon selecting an option like hotel, it returns {"id":1,"name":"hotel"}.
I need help in modifying the code to return only the name without the associated object.
UI:
https://i.sstatic.net/gMLjs.png
labels.html:
<md-content layout="column">
<md-chips ng-model="cont.vm.selectedLabels" md-autocomplete-snap md-require-match="false"
md-on-append="cont.createLabel($chip)">
<md-autocomplete
md-selected-item="cont.vm.selectedItem"
md-search-text="searchText"
md-items="item in cont.querySearch(searchText)"
md-item-text="item.name"
md-min-length="2"
placeholder="Type to add a label">
<span md-highlight-text="cont.vm.searchText" >{{item.name}}</span>
<md-not-found>
No matches found.
</md-not-found>
</md-autocomplete>
<md-chip-template>
<span>
<strong>{{$chip.name}}</strong>
</span>
</md-chip-template>
</md-chips>
<br />
<p class="md-title">Existing Labels</p>
<md-list>
<md-list-item class="md-2-line label-option" ng-repeat="label in cont.vm.labels" layout="row"
layout-wrap>
<div class="md-item-text md-whiteframe-z1" flex>
<h3>(NAME: {{label.name}}) (ID: {{label.id}})</h3>
</div>
</md-list-item>
</md-list>
</md-content>
labelsController.ts:
constructor(private $scope: common.IScope<LabelScope>,
private labelsService: ILabelsService){
super($scope);
this.vm.labels = this.loadLabels();
this.vm.selectedLabels = [];
this.vm.selectedItem = null;
this.vm.searchText = null;
console.log($scope);
}
private loadLabels() {
return this.labelsService.getLabels();
}
// Returns list of labels that already exists
public querySearch (query: string) {
var results = query ? this.loadLabels() : [];
return results;
console.log(results);
}
// Returns name + ID on new chip created
public createLabel($chip: string) {
return {
name: $chip,
id: 4
};
}
labelsService.ts:
private mockLabels: Array<Label> = [
new Label(1, 'hotel'),
new Label(2, 'sport'),
new Label(3, 'gaming'),
new Label(4, 'apple'),
new Label(5, 'retail')
];
public getLabels() {
return this.mockLabels;
console.log(this.mockLabels);
}