javascript - examples - Borrar entrada de texto al hacer clic con AngularJS

page title angular 4

Question

¿Cómo puedo borrar una entrada de texto al hacer clic en un botón usando angularJS?

La X es un enlace separado, en el que me gustaría activar una función.

HTML

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

Answer 1

Inspirado en Robert''s respuesta de Robert''s , pero cuando lo usamos,

ng-click="searchAll = null" en el filtro, hace que los valores del modelo sean null y, a su vez, la búsqueda no funciona con su funcionalidad normal, por lo que sería mejor usar ng-click="searchAll = ''''" cambio

Answer 2

La forma más sencilla de borrar / restablecer el campo de texto al hacer clic es borrar / restablecer el alcance

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

En el controlador

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

Answer 3

Prueba esto,

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

Answer 4

Si desea limpiar todo el formulario, puede usar dicho enfoque. Este es tu modelo en el controlador:

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

Tu 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>

Entonces, debe clonar / guardar su estado claro por:

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

Su función de reinicio será:

$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.
};

De esa manera, puedes limpiar toda tu forma

Answer 5

Simplemente borre el valor del modelo de alcance en el evento de clic y debería ser el truco para usted.

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

O si mantiene la función de $scope su controlador y la elimina desde allí. Asegúrate de haber configurado tu controlador correctamente.

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

Answer 6

Una manera más fácil y más corta es:

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

Esto siempre me ha funcionado.

Answer 7

En tu controlador

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

Answer 8

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

http://jsfiddle.net/nzPJD/

JsAdicional de cómo podrías hacerlo sin usar JS en línea.