Clear / Reset Material AngualrJS <md-autocomplete>

Question

I want to reset <md-autocomplete>manage in Material AngularJS.

https://material.angularjs.org/latest/#/demo/material.components.autocomplete
https://material.angularjs.org/latest/#/api/material.components.autocomplete/directive/mdAutocomplete

Basically, I want to reset this to him in the initial state. I can access ng-modeland assign it null. But it does not remove the display text contained in the attribute md-item-text.

Someone may like it, let me know how I can solve the same.

Answer 1

You need to clear the search text, look at this code: http://codepen.io/anon/pen/QbGZWP?editors=101

I created a button that calls the clear function:

function clear() {
  self.selectedItem = null;
  self.searchText = "";
}

These are the attributes set in the directive md-autocomplete:

<md-autocomplete 
  md-selected-item="ctrl.selectedItem" 
  md-search-text="ctrl.searchText" 
  md-items="item in ctrl.querySearch(ctrl.searchText)" 
>

. , , .

Answer 2

md-selected-item-change .

    <md-autocomplete flex
       md-item-text="item.Text"
       md-items="item in data"
       md-search-text-change="query(searchText)"
       md-search-text="searchText"
       md-selected-item="selectedItem"
       md-no-cache="false"
       md-input-minLength="2"
       md-input-name="exampleAutocomplete"
       md-selected-item-change="addSelectedItem();"
       md-floating-label="Nereye">
           <md-item-template>
               <span md-highlight-text="searchText">{{item.Text}}</span>
           </md-item-template>
           <md-not-found>No matching were found were "{{searchText}}".</md-not-found>
    </md-autocomplete>

, "addSelectedItem" searchText . ;

$scope.addSelectedItem = function () {
            $scope.searchText = ''; 
};

. , .

Answer 3

Set md-min-length = "1" to do a clear job without an extra function or button.