Chcę złapać zdarzenie naciśnij klawisz Enter w polu tekstowym poniżej. Aby to wyjaśnić, używam a, ng-repeat
aby wypełnić całe ciało. Oto 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>
To jest mój moduł:
angular.module('components', ['ngResource']);
Używam zasobu do zapełnienia tabeli, a mój kod kontrolera to:
function Ajaxy($scope, $resource) {
//controller which has resource to populate the table
}
angularjs
angularjs-directive
angular-ui
Venkata Tata
źródło
źródło
Odpowiedzi:
Musisz dodać
directive
:JavaScript :
HTML :
źródło
keydown
ikeypress
imprez elementu jest przypisany. Po odebraniu zdarzenia dostarczone wyrażenie jest oceniane w$apply
bloku.var key = typeof event.which === "undefined" ? event.keyCode : event.which;
tak długo, jak zdarzenie. Które nie jest używane przez każdą przeglądarkę. Zobacz komentarze tutaj: stackoverflow.com/a/4471635/2547632keyup
w teście wiązaniaAlternatywą jest zastosowanie standardowej dyrektywy
ng-keypress="myFunct($event)"
Następnie w kontrolerze możesz mieć:
źródło
ng-keypress
nie wydaje się być częścią angularui-keypress
Moje najprostsze podejście z wykorzystaniem tylko wbudowanej dyrektywy kątowej:
ng-keypress
,ng-keydown
Lubng-keyup
.Zwykle chcemy dodać obsługę klawiatury dla czegoś, co jest już obsługiwane przez kliknięcie ng.
na przykład:
Dodajmy teraz obsługę klawiatury.
wyzwalaj klawiszem Enter:
klawiszem spacji:
spacją lub wprowadź klucz:
jeśli jesteś w nowoczesnej przeglądarce
Więcej informacji o keyCode:
keyCode jest przestarzały, ale dobrze obsługiwany API, zamiast tego możesz użyć $ evevt.key w obsługiwanej przeglądarce.
Zobacz więcej w https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key
źródło
Kolejna prosta alternatywa:
I alternatywa ng-ui:
źródło
Oto, co wymyśliłem, gdy tworzyłem aplikację o podobnych wymaganiach, nie wymaga pisania dyrektywy i stosunkowo łatwo jest powiedzieć, co robi:
źródło
Możesz użyć ng-keydown = "myFunction ($ event)" jako atrybutu.
źródło
HTML
controller.js
źródło
Możesz także zastosować go do kontrolera na elemencie nadrzędnym. Ten przykład można wykorzystać do podświetlenia wiersza w tabeli za pomocą klawiszy strzałek w górę / w dół.
źródło
Próbować
nic dla mnie nie zrobił
Strangley przykład na https://docs.angularjs.org/api/ng/directive/ngKeypress , który robi ng-keypress = "count = count + 1", działa.
Znalazłem alternatywne rozwiązanie, w którym naciśnięcie Enter wywołuje kliknięcie przycisku ng.
źródło
ng-keypress="console.log('foo')"
też nie działało dla mnie, ale jeśli to zrobisz, tong-keypress="fooMethod()"
w twoim kontrolerze$scope.fooMethod = function() { console.log('fooMethod called'); }
działa.źródło
To jest rozszerzenie odpowiedzi EpokK.
Miałem ten sam problem z koniecznością wywołania funkcji zasięgu, gdy klawisz Enter jest wprowadzany do pola wprowadzania. Jednak chciałem również przekazać wartość pola wejściowego do określonej funkcji. To jest moje rozwiązanie:
});
Zastosowanie w HTML jest następujące:
Uznanie dla EpokK za jego odpowiedź.
źródło
<input type="text" name="itemname" ng-model="item.itemname" lta-enter="add(item.itemname)" placeholder="Add item"/>
A co z tym?:
Teraz, kiedy naciśniesz klawisz Enter po napisaniu czegoś w danych wejściowych, formularz wie, jak sobie z tym poradzić.
źródło
chat.sendMessage()
zdefiniowanoOto przykład kodu, który zrobiłem dla mojego projektu. Zasadniczo dodajesz tagi do swojego bytu. Wyobraź sobie, że masz wprowadzony tekst. Po wprowadzeniu nazwy znacznika pojawia się menu rozwijane ze wstępnie załadowanymi znacznikami do wyboru, nawigujesz za pomocą strzałek i wybierasz za pomocą Enter:
HTML + AngularJS v1.2.0-rc.3
Controller.js
CSS + Bootstrap v2.3.2
źródło
Jestem trochę spóźniony .. ale znalazłem prostsze rozwiązanie, używając
auto-focus
... Może to być przydatne dla przycisków lub innych, gdy popdialog
:<button auto-focus ng-click="func()">ok</button>
To powinno być w porządku, jeśli chcesz nacisnąć przycisk
on
Spacja lub Enter.źródło
oto moja dyrektywa:
stosowanie:
źródło
możesz użyć ng-keydown, ng-keyup, ng-press, takich jak to.
źródło
Myślę, że używanie document.bind jest nieco bardziej eleganckie
Aby pobrać dokument do konstruktora kontrolera:
źródło
źródło
Wszystko, co musisz zrobić, aby uzyskać wydarzenie, to:
Dyrektywa może to zrobić, ale nie tak to robisz.
źródło