AngularJS - zdarzenia

Autor podstrony: Krzysztof Zajączkowski

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

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:

<script> let controller = app.controller( "myFirstControllerEver", function ($scope){ // zamiast inicjalizowania zmiennej w atrybucie ng-init inicjalizuję ją tutaj: $scope.person = {name: 'myName', surname: 'mySurname', age: 18}; // tworzę zmienną, która będzie przechowywała nazwiska $scope.beautifulPeople = [ { name: 'Donald', surname: 'Tłusk', age: 61}, { name: 'Donald', surname: 'Dumb', age: 72} ]; $scope.addElement = function(){ if( $scope.person.name.length !== 0 && $scope.person.surname.length !== 0 && !($scope.person.name == "myName" || $scope.person.surname == "mySurname")){ $scope.beautifulPeople[$scope.beautifulPeople.length] = {name: $scope.person.name, surname: $scope.person.surname, age: $scope.person.age}; $scope.beautifulPeople.sort( function(a, b){ return (a.surname + a.name).localeCompare((b.surname + b.name)); } ); $scope.person.name = "myName"; $scope.person.surname = "mySurname"; }else{ alert("Wprowadź nazwisko i imię!"); } } // Tworzę funkcję, która została podpięta pod zdarzenie kliknięcia $scope.removeIndex = function(index){ console.log(index); if(confirm("Czy naprawdę pragniesz usunąć: " + $scope.beautifulPeople[index].name + " " + $scope.beautifulPeople[index].surname)){ $scope.beautifulPeople.splice(index, 1); } } }); </script>

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

Propozycje książek