Angular Material Autocomplete List

Basic Usage

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>
          

Result:

ctrl.selectedPeople = {{ ctrl.selectedPeople }}

Custom list item

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>
          

Result:

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 }}

Custom list controls

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>
          

Result:

{{ item.firstName + ' ' + item.lastName }}

ctrl.selectedPeople = {{ ctrl.selectedPeople }}