如何在提交後清空md-autocomplete文本字段？

Question

我在HTML表單中使用了md-autocomplete，然後我想在提交後將其字段設置爲空。我試過，如片段所示，使用$setPristine()但它沒有奏效。我也嘗試將模型分配給null或空字符串，但也不成功。

PS：我用Angularjs版本是v1.3.15

angular.module("myApp", ["ngMaterial"]) 
 
.controller("main", function($scope){ 
 
    $scope.searchString = ""; 
 
    $scope.routeToSearchPage = function (searchString, form) { 
 
      $scope.form.$setPristine(); 
 
     }; 
 
    
 
    $scope.simulateQuery = false; 
 
     $scope.isDisabled = false; 
 
     $scope.states  = loadAll(); 
 
     $scope.querySearch = querySearch; 
 
     function querySearch (query) { 
 
      var results = query ? $scope.states.filter(createFilterFor(query)) : $scope.states, 
 
       deferred; 
 
      if ($scope.simulateQuery) { 
 
       deferred = $q.defer(); 
 
       $timeout(function() { deferred.resolve(results); }, Math.random() * 1000, false); 
 
       return deferred.promise; 
 
      } else { 
 
       return results; 
 
      } 
 
     } 
 
     function loadAll() { 
 
      var allStates = "aaa, bbbb, cccc, bla"; 
 
      return allStates.split(/, +/g).map(function (state) { 
 
       return { 
 
        value: state.toLowerCase(), 
 
        display: state 
 
       }; 
 
      }); 
 
     } 
 
     function createFilterFor(query) { 
 
      var lowercaseQuery = angular.lowercase(query); 
 
      return function filterFn(state) { 
 
       return (state.value.indexOf(lowercaseQuery) === 0); 
 
      }; 
 
     } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular-animate.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular-aria.js"></script> 
 
<script src="//rawgit.com/angular/bower-material/master/angular-material.js"></script> 
 
<div ng-app="myApp"> 
 
<div ng-controller="main"> 
 
<form name="form" 
 
          ng-submit="submit(searchString);$event.preventDefault();"> 
 
    <md-autocomplete 
 
     md-floating-label="search" 
 
     ng-disabled="isDisabled" 
 
     md-no-cache="noCache" 
 
     md-selected-item="selectedItem" 
 
     md-search-text="searchString" 
 
     md-items="item in querySearch(searchString)" 
 
     md-item-text="item.display" 
 
     ng-keyup="$event.keyCode == 13 ? routeToSearchPage(searchString) : null"> 
 
     <md-item-template> 
 
     <span md-highlight-text="searchString" md-highlight-flags="^i">{{item.display}}</span> 
 
     </md-item-template> 
 
    </md-autocomplete> 
 
</form> 
 
<md-button ng-click="routeToSearchPage(searchString, form)"> 
 
    <md-icon class="material-icons">search</md-icon> 
 
</md-button> 
 
</div> 
 
</div>

Answer 1

這裏是清除的md-autocomplete的例子 - CodePen

您的代碼段是不實際顯示md-autocomplete爲它應該出現。

JS

$scope.clear = function() { 
    $scope.searchString = null; 
}; 

我也去掉下面的CodePen正常工作的標記：

ng-keyup="$event.keyCode == 13 ? routeToSearchPage(searchString) : null">