AngularJS - zdarzenia

Stronę tą wyświetlono już: 282 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:

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

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

Listing 2
  1. <script>
  2. let controller = app.controller(
  3. "myFirstControllerEver",
  4. function ($scope){
  5. // zamiast inicjalizowania zmiennej w atrybucie ng-init inicjalizuję ją tutaj:
  6. $scope.person = {name: 'myName', surname: 'mySurname', age: 18};
  7. // tworzę zmienną, która będzie przechowywała nazwiska
  8. $scope.beautifulPeople = [
  9. { name: 'Donald', surname: 'Tłusk', age: 61},
  10. { name: 'Donald', surname: 'Dumb', age: 72}
  11. ];
  13. $scope.addElement = function(){
  14. if(
  15. $scope.person.name.length !== 0 && $scope.person.surname.length !== 0
  16. && !($scope.person.name == "myName" || $scope.person.surname == "mySurname")){
  18. $scope.beautifulPeople[$scope.beautifulPeople.length] = {name: $scope.person.name, surname: $scope.person.surname, age: $scope.person.age};
  20. $scope.beautifulPeople.sort(
  21. function(a, b){
  22. return (a.surname + a.name).localeCompare((b.surname + b.name));
  23. }
  24. );
  26. $scope.person.name = "myName";
  27. $scope.person.surname = "mySurname";
  29. }else{
  30. alert("Wprowadź nazwisko i imię!");
  31. }
  32. }
  33. // Tworzę funkcję, która została podpięta pod zdarzenie kliknięcia
  34. $scope.removeIndex = function(index){
  35. console.log(index);
  36. if(confirm("Czy naprawdę pragniesz usunąć: " + $scope.beautifulPeople[index].name + " " + $scope.beautifulPeople[index].surname)){
  37. $scope.beautifulPeople.splice(index, 1);
  38. }
  39. }
  40. });
  41. </script>

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

Komentarze