web-dev-qa-db-fra.com

Effacer le texte saisi au clic avec AngularJS

Comment effacer une saisie de texte en cliquant sur un bouton avec angularJS?

Search input

Le X est un lien séparé, sur lequel je voudrais déclencher une fonction.

HTML

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

Effacez simplement la valeur du modèle de portée sur l'événement click et cela devrait faire l'affaire pour vous.

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

Ou si vous conservez la fonction $scope de votre contrôleur et l'effacez de là. Assurez-vous que vous avez configuré votre contrôleur correctement.

$scope.clearSearch = function() {
    $scope.searchAll = null;
}
83
Robert Koritnik
$scope.clearSearch = function () {
    $scope.searchAll = "";
};

http://jsfiddle.net/nzPJD/

JsFiddle explique comment vous pouvez le faire sans utiliser JS en ligne.

15
Kasper Lewau

Un moyen plus simple et plus simple est:

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

Cela a toujours fonctionné pour moi.

10
Shivek Parmar

Si vous voulez nettoyer tout le formulaire, vous pouvez utiliser une telle approche . Voici votre modèle dans le contrôleur:

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

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

Ensuite, vous devriez cloner/sauvegarder votre état clair en:

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

Votre fonction de réinitialisation sera:

$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 cette façon, vous êtes en mesure de nettoyer tout votre formulaire

7
Vladyslav Babenko

Le moyen le plus simple d'effacer/réinitialiser le champ de texte au clic est d'effacer/réinitialiser l'étendue

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

Dans le contrôleur 

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

Inspiré de Robert's answer, mais quand on utilise, 

ng-click="searchAll = null" dans le filtre, les valeurs du modèle ont la valeur null et la recherche ne fonctionnant pas avec ses fonctionnalités normales, il serait donc préférable d'utiliser plutôt ng-click="searchAll = ''"

1
San Krish

Essaye ça,

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

Dans votre contrôleur 

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