This is the most basic usage of the autocomplete-list directive.
<autocomplete-list ng-model ="ctrl.selectedPeople" items ="ctrl.allPeople" item-text ="item.firstName + ' ' + item.lastName" item-id ="item.age"> </autocomplete-list>
ctrl.selectedPeople = {{ ctrl.selectedPeople }}
By adding markup inside the directive you can customize the appearence of each list item. Note for the moment you have to include the additional buttons for them to be rendered.
<autocomplete-list ng-model ="ctrl.selectedPeople" items ="ctrl.allPeople" item-id ="item.age"> <p>{{ item.lastName }}, {{ item.firstName }}</p> <md-button type="button" class="md-exclude multi-select-secondary-button" ng-click="aclCtrl.deselectItem(item)" aria-label="remove"> <md-icon ng-include="'autocompleteListClear.svg'"></md-icon> </md-button> </autocomplete-list>
Here, we have simply changed the display format of the name.
This could easily be accomplished with item-text
property but this is just for demonstration
{{ item.lastName }}, {{ item.firstName }}
ctrl.selectedPeople = {{ ctrl.selectedPeople }}
You can even add additional controls to the list to edit other properties of your items.
<autocomplete-list ng-model ="ctrl.selectedPeople" items ="ctrl.allPeople" item-id ="item.age"> <p>{{ item.firstName + ' ' + item.lastName }}</p> <input type="number" ng-model="item.age"> <md-button type="button" class="md-exclude multi-select-secondary-button" ng-click="aclCtrl.deselectItem(item)" aria-label="remove"> <md-icon ng-include="'autocompleteListClear.svg'"></md-icon> </md-button> </autocomplete-list>
{{ item.firstName + ' ' + item.lastName }}
ctrl.selectedPeople = {{ ctrl.selectedPeople }}