AngularJS, löschen Sie die Eingabe von text mit der Taste

Mit AngularJS, was ist der richtige Weg, um löschen Sie den Wert von einem Textfeld? Ich habe ein input-Feld mit einem button daneben. Der Benutzer tippt es und trifft die-Taste zum löschen oder zurücksetzen.

Ich weiß, ich kann hinzufügen, ein ng-click - Ereignis auf dem button selbst und rufen Sie eine Funktion auf, aber ich bin nicht sicher, ob das der richtige Weg, es zu tun.

Recht jetzt alles was ich habe ist:

<input type="text" ng-model="searchQuery" />
<button class="btn" <!--do something here maybe?-->>
  <i class="icon-search" ng-class="{'icon-refresh': searchQuery.length}"></i>
</button>
InformationsquelleAutor Ronnie | 2013-03-09
  1. 8

    ng-click ist der "Eckige" Weg, es zu tun

    nur deklarieren Sie eine Funktion in Ihrem Bereich und bringen Sie den button ng-click

    Wenn Sie wollte etwas Fortgeschrittener ist, dann ist das "Winkel-Weg" schlägt die Schaffung einer Richtlinie wickeln Sie das von Ihnen gewünschte Funktionalität in es und befestige es irgendwie an Ihren button (je nachdem, wie Sie bei der Umsetzung Ihrer Richtlinie)

    Wenn Sie wollen, ein Beispiel, lassen Sie mich wissen in den Kommentaren

    • ok, wenn es so ist dann bin ich ziemlich sicher, dass ich es herausfinden. Ich war mir nicht sicher, ob es eine bessere Praxis Art und Weise, es zu tun. Danke @Dogoku
    • und nur um zu bestätigen, das ist, wie ich landete zurücksetzen $scope.resetSearch = function(){$scope.searchQuery = "";}
    • yep, sieht gut aus
    • was, wenn ich mein ng Modell wie diesem.. ng-model =" - filter.zu" ?? $Umfang.filter = " ; -> diese Methode funktioniert bei mir nie
    InformationsquelleAutor Dogoku
  2. 30

    Ich hatte das gleiche problem. Vielleicht ist einfach am besten?

    Keine Notwendigkeit für den Aufruf einer Methode im controller. Keine Notwendigkeit für eine Richtlinie entweder. Nur eine kurze Anweisung deaktivieren Sie das Modell, das erklärt, in dem input-tag. Wie diese:

    <input ng-model="searchQuery">
<button class="btn" ng-click="searchQuery = ''"></button>

    Können Sie auch ausblenden die Schaltfläche löschen, wenn kein text in der Eingabe, wie diese:

    <button class="btn" ng-show="searchQuery.length" ...></button>

    Durch die Art und Weise, vielleicht eine Richtlinie, dass die clear-Taste innerhalb der input-box wäre schön. So etwas wie auf dem iPhone.

    • +1 - das ist eher die 'Winkel-Weg", nur um das löschen der Daten Modell klicken.
    • Tolle Antwort. Nur zur Klarstellung ein kleiner Tippfehler-- überprüfen Sie nochmals die Taste searchQquery.
    • Danke, habe ich entfernt, das zweite 'f'
    • Einige würden argumentieren gegen die Logik in den Blick. Zum einen die Logik in der view kann nicht Unit-Getestet (obwohl es sein kann, E2E getestet mit Winkelmesser).
    InformationsquelleAutor nijlgier
Schreibe einen Kommentar