<commit_before><a name="Autocomplete List Directive"></a>
## 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:
```html
<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 | <code>Object</code> | The item object to render |
| aclCtrl.itemText | <code>Function</code> | 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 | <code>Function</code> | When called, will remove an item from the model. The first argument is the item to remove. Eg. <md-button ng-click="aclCtrl.deselectItem(item)"></md-button> |

### Directive attributes

**Kind**: global variable  

| Param | Type | Description |
| --- | --- | --- |
| ngModel | <code>Array.&lt;Object&gt;</code> | Required. Array of selected objects. These are tracked via reference. |
| items | <code>Array.&lt;Object&gt;</code> | Entire list of items to select from. |
| itemText | <code>Expression</code> | 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. |

**Example**  
```js
<autocomplete-list
  ng-model="ctrl.selectedPeople"
  items="ctrl.allPeople"
  item-text="item.firstName + ' ' + item.lastName">
</autocomplete-list>
```<commit_msg>Improve docs with example using placeholder<commit_after><a name="Autocomplete List Directive"></a>
## 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:
```html
<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 | <code>Object</code> | The item object to render |
| aclCtrl.itemText | <code>Function</code> | 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 | <code>Function</code> | When called, will remove an item from the model. The first argument is the item to remove. Eg. <md-button ng-click="aclCtrl.deselectItem(item)"></md-button> |

### Directive attributes

**Kind**: global variable  

| Param | Type | Description |
| --- | --- | --- |
| ngModel | <code>Array.&lt;Object&gt;</code> | Required. Array of selected objects. These are tracked via reference. |
| items | <code>Array.&lt;Object&gt;</code> | Entire list of items to select from. |
| itemText | <code>Expression</code> | 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> ``` |

{'fraction_non_alphanumeric': 0.13575374901341752, 'fraction_numerical': 0.036306235201262825, 'mean_word_length': 3.9550342130987293, 'pattern_counts': {'":': 0, '<': 63, '<?xml version=': 0, '>': 63, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, 'xml': 2}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 1, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5898221', 'n_tokens_mistral': 1675, 'n_tokens_neox': 1492, 'n_words': 602}