清除/重置材料AngualrJS <md-autocomplete>

时间:2015-05-26 12:07:09

标签: angularjs material-design angular-material md-autocomplete

我想在Material AngularJS中重置<md-autocomplete>控件。

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

基本上我想把它重置为它的初始状态。我可以访问ng-model&amp;为其分配null。但是,它不会删除md-item-text属性中包含的显示文本。

请有人让我知道我该如何解决。

3 个答案:

答案 0 :(得分:4)

你需要清除搜索文本,看看这个codepen: http://codepen.io/anon/pen/QbGZWP?editors=101

我创建了一个调用clear函数的按钮:

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

这些是md-autocomplete指令设置的属性:

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

注意:您可能还需要其他属性,具体取决于您的情况。

答案 1 :(得分: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 = ''; 
};

它对我有用。希望它能帮助你解决问题。

答案 2 :(得分:0)

设置md-min-length =&#34; 1&#34;如果没有额外的清晰功能或按钮,将会做出明确的工作。