it-swarm.com.de

Klare Texteingabe beim Klick mit AngularJS

Wie kann ich eine Texteingabe beim Klicken auf eine Schaltfläche mithilfe von angleJS löschen?

Search input

Das X ist eine separate Verknüpfung, auf der ich eine Funktion auslösen möchte.

HTML

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

Löschen Sie einfach den Wert des Gültigkeitsbereichsmodells für ein Klickereignis, und es sollte den Trick für Sie tun.

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

Oder wenn Sie die $scope-Funktion Ihres Controllers beibehalten und von dort löschen. Stellen Sie sicher, dass Sie Ihren Controller richtig eingestellt haben.

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

http://jsfiddle.net/nzPJD/

JsFiddle, wie Sie dies ohne Inline JS tun können.

15
Kasper Lewau

Ein einfacher und kürzerer Weg ist:

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

Das hat immer für mich funktioniert.

10
Shivek Parmar

Wenn Sie das gesamte Formular bereinigen möchten, können Sie einen solchen Ansatz verwenden. Dies ist Ihr Modell im Controller:

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

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

Dann sollten Sie Ihren Clear-Status durch Folgendes klonen/speichern:

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

Ihre Reset-Funktion wird sein:

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

Auf diese Weise können Sie Ihre gesamte Form aufräumen

7

Die einfachste Möglichkeit zum Löschen/Zurücksetzen des Textfelds beim Klicken ist das Löschen/Zurücksetzen des Bereichs

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

Im Controller 

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

Inspiriert von Roberts Antwort, aber wenn wir verwenden, 

ng-click="searchAll = null" im Filter macht die Modellwerte als null und die Suche funktioniert nicht mit ihrer normalen Funktionalität. Daher ist es besser genug, ng-click="searchAll = ''" zu verwenden

1
San Krish

Versuche dies,

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

In Ihrem Controller

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