Как очистить текстовое поле md-autocomplete после отправки?

angularjs angular-material

1093 просмотра

1 ответ

Я использовал md-autocomplete внутри html-формы, затем я хотел установить пустое поле после отправки. Я попытался, как показано в фрагменте, использовать, $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>

Автор: Hala Ba Источник Размещён: 08.11.2019 11:15

Ответы (1)


0 плюса

Решение

Вот пример очистки md-autocomplete- CodePen

Ваш фрагмент на самом деле не показывает, md-autocompleteкак он должен выглядеть.

JS

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

Я также удалил разметку ниже для правильной работы CodePen:

ng-keyup="$event.keyCode == 13 ? routeToSearchPage(searchString) : null">
Автор: camden_kid Размещён: 20.08.2016 01:24
Вопросы из категории :
32x32