AngularJS - zdarzenia

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 1257 razy

AngularJS udostępnia szereg własnych atrybutów (dyrektyw), które umożliwiają w kodzie strony podpięcie funkcji JavaScript lub wykonanie jakiegoś kodu w wyniku wywołania określonego zdarzenia. Taka funkcja może przyjmować jako argument zmienną $event, która zawiera dodatkowe informacje dotyczące np. położenia kursora myszki, gdy dane zdarzenie zostało wywołane. Lista atrybutów (dyrektyw) udostępnionych przez AngularJS jest następująca:

ng-blur - wywołanie zdarzenia rozmycia;
ng-change - wywołanie zdarzenia związanego z zmianą stanu kontrolki, np. zmiana tekstu w kontrolce do wpisywania tekstu;
ng-click - wywołanie zdarzenia związanego z kliknięciem elementu HTML-a;
ng-copy - wywołanie zdarzenia związanego z kopiowaniem poprzez wciśnięcie kombinacji Ctrl+c;
ng-cut - wywołanie zdarzenia związanego z wycięciem Ctrl+x;
ng-dblclick - wywołanie zdarzenia związanego z podwójnym kliknięciem myszką danego elementu HTML-a;
ng-focus - wywołanie zdarzenia związanego z przejęciem lub utratą fokusa, czyli obsługi klawiatury przez daną kontrolkę;
ng-keydown - wywołanie zdarzenia wciśnięcia przycisku klawiatury;
ng-keypress - wywołanie zdarzenia na wciśnięcia przycisku klawiatury;
ng-keyup - wywołanie zdarzenia zwolnienia przycisku klawiatury;
ng-mousedown - wywołanie zdarzenia wciśnięcia przycisku myszy;
ng-mouseenter - wywołanie zdarzenia związanego z wejściem kursora myszki w obszar danego elementu HTML-a;
ng-mouseleave - wywołanie zdarzenia związanego z opuszczeniem kursora myszki obszaru danego elementu HTML-a;
ng-mousemove - wywołanie zdarzenia związanego z ruchem myszki;
ng-mouseover - wywołanie zdarzenia związanego z ruchem myszki nad obszarem danego elementu HTML-a;
ng-mouseup - wywołanie zdarzenia związanego z zwolnieniem przycisku myszy;
ng-paste - wywołanie zdarzenia wklejenia Ctrl+p

Dla przykładu wcześniej omawiany kod wzbogaciłem o dodatkowe przyciski umożliwiające usuwanie danego elementu z listy wykorzystując zdarzenie ng-click. Teraz kod wygląda więc następująco:

<table cellspacing = "0"> <caption>Beautiful people list</caption> <tr><th></th><th>Nr.</th><th>Imię</th><th>Nazwisko</th><th>Wiek</th></tr> <tr ng-repeat="beautifulPerson in beautifulPeople"> <td><button ng-click="removeIndex($index)" class="deleteItem"><img src="delete.svg" width = "15px" alt="delete" class="deleteItem"/></button></td> <td>{{ $index + 1 }}</td> <td>{{ beautifulPerson.name }} </td> <td>{{ beautifulPerson.surname}}</td> <td>{{ beautifulPerson.age }}</td> </tr> <tr> <td colspan="2"><button ng-click = "addElement()">Dodaj</button></td> <td><input type="text" ng-model = "person.name" name = "personName"/></td> <td><input type = "text" ng-model = "person.surname" name = "personSurname"/></td> <td><input type="number" min = "18" max = "100" name = "personAge" ng-model = "person.age"/></td> </tr> </table>

Sam kod funkcji podpiętej pod zdarzenie kliknięcia wygląda następująco:

Cały zmodyfikowany projekt przykładu z kodem można zobaczyć tutaj.

Propozycje książek