Очистить ввод текста при нажатии с помощью AngularJS

Question

Как очистить ввод текста нажатием кнопки с помощью angularJS?

Х является отдельным звеном, на котором я хотел бы, чтобы вызвать функцию.

HTML

<input type="text" class="form-control" data-ng-model="searchAll"> 
<a class="clear" data-ng-click="clearSearch()">X</a> 

Answer 1

Просто ясно значение модели сфера на событие щелчка, и он должен сделать трюк для вас.

<input type="text" ng-model="searchAll" /> 
<a class="clear" ng-click="searchAll = null"> 
    <span class="glyphicon glyphicon-remove"></span> 
</a> 

Или, если вы держите $scope функцию вашего контроллера и снимите его оттуда. Убедитесь, что вы правильно настроили контроллер.

$scope.clearSearch = function() { 
    $scope.searchAll = null; 
} 

Answer 2

$scope.clearSearch = function() { 
    $scope.searchAll = ""; 
}; 

http://jsfiddle.net/nzPJD/

JsFiddle, как вы могли бы сделать это без использования встроенного JS.

Answer 3

Если вы хотите очистить всю форму, вы можете использовать такой подход. Это ваша модель в контроллер:

$scope.registrationForm = { 
    'firstName'  : '', 
    'lastName'  : '' 
}; 

Ваш HTML:

<form class="form-horizontal" name="registrForm" role="form"> 
    <input type="text" class="form-control" 
         name="firstName" 
         id="firstName" 
         ng-model="registrationForm.firstName" 
         placeholder="First name" 
         required> First name 
    <input type="text" class="form-control" 
         name="lastName" 
         id="lastName" 
         ng-model="registrationForm.lastName" 
         placeholder="Last name" 
         required> Last name 
</form> 

Затем вы должны клонировать/сохранить прозрачное состояние по:

$scope.originForm = angular.copy($scope.registrationForm); 

Ваша функция сброса будет:

$scope.resetForm = function(){ 
    $scope.registrationForm = angular.copy($scope.originForm); // Assign clear state to modified form 
    $scope.registrForm.$setPristine(); // this line will update status of your form, but will not clean your data, where `registrForm` - name of form. 
}; 

В таком случае вы можете очистить в целом ваша форма

Answer 4

проще и более короткий путь является:

<input type="text" class="form-control" data-ng-model="searchAll"> 
<a class="clear" data-ng-click="searchAll = '' ">X</a> 

Это всегда работал для меня.

Answer 5

Вдохновленные из Robert's ответа, но когда мы используем,

ng-click="searchAll = null" в фильтре, он делает значение модели в качестве null и в Пошаговой поиске не работает с нормальной функциональностью, так что было бы лучше достаточно использовать ng-click="searchAll = ''" вместо

Answer 6

Самый простой способ очистить/сбросить текстовое поле мыши, чтобы очистить/сбросить за рамки

<input type="text" class="form-control" ng-model="searchAll" ng-click="clearfunction(this)"/> 

в контроллере

$scope.clearfunction=function(event){ 
    event.searchAll=null; 
} 

Answer 7

в контроллере

$scope.clearSearch = function() { 
    $scope.searchAll = ''; 
} 

Answer 8

Try это,

this.searchAll = element(by.xpath('path here')); 
this.searchAll.sendKeys('');