DOCS.md

Autocomplete List Directive

This element is made up of an md-autocomplete that will show prompts based on the unselected items, and an md-list that will display all selected items.

Customizing list contents

The contents of the list is by default based on the text of each items generated by the itemText expression. The exact contents is:

<p>{{ aclCtrl.itemText({item: item}) }}</p>

<md-button
  type="button"
  class="md-exclude multi-select-secondary-button"
  ng-click="aclCtrl.deselectItem(item)"
  aria-label="remove">
  <md-icon>
    <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
      <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
      <path d="M0 0h24v24H0z" fill="none"/>
    </svg>
  </md-icon>
</md-button>

The contents can be customized by providing contents to the directive which will then be rendered inside each list item. When writing custom contents you have access to the following properties and functions:

Name	Type	Description
item	Object	The item object to render
aclCtrl.itemText	Function	The function that wraps the expression provided for itemText. To call it you need to provide an object with a single property; item, which is the item to build the text for. Eg. <p>{{ aclCtrl.itemText({item: item}) }}</p>
aclCtrl.deselectItem	Function	When called, will remove an item from the model. The first argument is the item to remove. Eg.

Directive attributes

Kind: global variable

Param	Type	Description
ngModel	Array.<Object>	Required. Array of selected objects. These are tracked via reference.
items	Array.<Object>	Entire list of items to select from.
itemText	Expression	Expression to convert an item object into a single string to be displayed in the autocomplete and the list. The text generated here will also be searched when the user types in the autocomplete box. The item is accessed via the item property. Basic Example html <autocomplete-list ng-model="ctrl.selectedPeople" items="ctrl.allPeople" item-text="item.firstName + ' ' + item.lastName"> </autocomplete-list>