Ich möchte das Ereignis zum Drücken der Eingabetaste im Textfeld unten abfangen. Um es klarer zu machen, benutze ich a, ng-repeat
um den Körper zu bevölkern. Hier ist der HTML:
<td><input type="number" id="closeqty{{$index}}" class="pagination-right closefield"
data-ng-model="closeqtymodel" data-ng-change="change($index)" required placeholder="{{item.closeMeasure}}" /></td>
Das ist mein Modul:
angular.module('components', ['ngResource']);
Ich verwende eine Ressource zum Auffüllen der Tabelle und mein Controller-Code lautet:
function Ajaxy($scope, $resource) {
//controller which has resource to populate the table
}
angularjs
angularjs-directive
angular-ui
Venkata Tata
quelle
quelle
Antworten:
Sie müssen Folgendes hinzufügen
directive
:Javascript :
HTML :
quelle
keydown
undkeypress
Ereignisse des Elements, dem sie zugeordnet ist. Wenn das Ereignis empfangen wird, wird der angegebene Ausdruck innerhalb eines$apply
Blocks ausgewertet .var key = typeof event.which === "undefined" ? event.keyCode : event.which;
Solange event.which nicht von jedem Browser verwendet wird. Siehe Kommentare hier: stackoverflow.com/a/4471635/2547632keyup
imEine Alternative ist die Verwendung der Standardrichtlinie
ng-keypress="myFunct($event)"
Dann können Sie in Ihrem Controller:
quelle
ng-keypress
scheint es nicht Teil von Angular 1.0.x zu seinui-keypress
(mit leicht unterschiedlicher AufrufsemantikMein einfachster Ansatz mit nur eckiger eingebauter Direktive:
ng-keypress
,ng-keydown
Oderng-keyup
.Normalerweise möchten wir Tastaturunterstützung für etwas hinzufügen, das bereits per ng-click verarbeitet wurde.
zum Beispiel:
Fügen wir nun die Tastaturunterstützung hinzu.
Auslösen durch Eingabetaste:
durch Leertaste:
durch Leerzeichen oder Eingabetaste:
wenn Sie in einem modernen Browser sind
Weitere Informationen zu keyCode:
keyCode ist eine veraltete, aber gut unterstützte API. Sie können stattdessen $ evevt.key im unterstützten Browser verwenden.
Weitere Informationen finden Sie unter https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key
quelle
Eine weitere einfache Alternative:
Und die ng-ui-Alternative:
quelle
Folgendes habe ich herausgefunden, als ich eine App mit einer ähnlichen Anforderung erstellt habe: Es ist nicht erforderlich, eine Direktive zu schreiben, und es ist relativ einfach zu sagen, was sie tut:
quelle
Sie können ng-keydown = "myFunction ($ event)" als Attribut verwenden.
quelle
html
controller.js
quelle
Sie können es auch auf einen Controller in einem übergeordneten Element anwenden. In diesem Beispiel können Sie eine Zeile in einer Tabelle durch Drücken der Aufwärts- / Abwärtspfeiltasten hervorheben.
quelle
Ich versuche es
habe nichts für mich getan.
Seltsamerweise funktioniert das Beispiel unter https://docs.angularjs.org/api/ng/directive/ngKeypress , das ng-keypress = "count = count + 1" ausführt.
Ich habe eine alternative Lösung gefunden, bei der durch Drücken der Eingabetaste der ng-Klick der Schaltfläche aufgerufen wird.
quelle
ng-keypress="console.log('foo')"
hat auch bei mir nicht funktioniert, aber wenn du es tustng-keypress="fooMethod()"
und in deinem Controller$scope.fooMethod = function() { console.log('fooMethod called'); }
funktioniert.quelle
Dies ist eine Erweiterung der Antwort von EpokK.
Ich hatte das gleiche Problem, eine Bereichsfunktion aufrufen zu müssen, wenn die Eingabetaste in einem Eingabefeld gedrückt wird. Ich wollte aber auch den Wert des Eingabefeldes an die angegebene Funktion übergeben. Das ist meine Lösung:
});
Die Verwendung in HTML ist wie folgt:
Ein großes Lob an EpokK für seine Antwort.
quelle
<input type="text" name="itemname" ng-model="item.itemname" lta-enter="add(item.itemname)" placeholder="Add item"/>
Was ist damit?:
Wenn Sie nun die Eingabetaste drücken, nachdem Sie etwas in Ihre Eingabe geschrieben haben, weiß das Formular, wie es damit umgeht.
quelle
chat.sendMessage()
definiertEin Beispiel für Code, den ich für mein Projekt gemacht habe. Grundsätzlich fügen Sie Ihrer Entität Tags hinzu. Stellen Sie sich vor, Sie haben Eingabetext. Bei der Eingabe des Tag-Namens erhalten Sie ein Dropdown-Menü mit vorinstallierten Tags zur Auswahl. Sie navigieren mit Pfeilen und wählen mit Enter:
HTML + AngularJS v1.2.0-rc.3
Controller.js
CSS + Bootstrap v2.3.2
quelle
Ich bin ein bisschen spät dran .. aber ich habe eine einfachere Lösung gefunden mit
auto-focus
.. Dies könnte für Schaltflächen oder andere nützlich sein, wenn ich eindialog
:<button auto-focus ng-click="func()">ok</button>
Das sollte in Ordnung sein, wenn Sie die Taste Leertaste
on
oder Eingabetaste drücken möchten .quelle
Hier ist meine Anweisung:
Verwendungszweck:
quelle
Sie können ng-keydown, ng-keyup und ng-press wie diesen verwenden.
quelle
Ich denke, die Verwendung von document.bind ist etwas eleganter
So erhalten Sie ein Dokument zum Controller-Konstruktor:
quelle
quelle
Alles, was Sie tun müssen, um die Veranstaltung zu erhalten, ist Folgendes:
Eine Direktive kann es tun, aber so machen Sie es nicht.
quelle