<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<script src="AngularJS.min.js"></script>
<style>
label{
display: inline-block;
width: 150px;
}
</style>
</head>
<body ng-app = "myFirstAngularApplicationEver" ng-controller = "myFirstControllerEver">
<p><label for = "personName">Imię:</label><input type="text" ng-model = "person.name" name = "personName"/></p>
<p><label for = "personSuraname">Nazwisko: </label><input type = "text" ng-model = "person.surname" name = "personSurname"/></p>
<p><label for = "personAge">Wiek:</label><input type="number" min = "18" max = "100" name = "personAge" ng-model = "person.age"/></p>
<p>{{ person.name + " " + person.surname}}</p>
<table>
<tr><th>Nr.</th><th>Imię i nazwisko</th><th>Wiek</th></tr>
<tr ng-repeat="beautifulPerson in beautifulPeople">
<td>{{ $index + 1 }}</td>
<td>{{ beautifulPerson.name + " " + beautifulPerson.surname}}</td>
<td>{{ beautifulPerson.age }}</td>
</tr>
</table>
<!-- tworzę przycisk, pod który podpinam funkcję addElement() zainicjowaną dopiero w kontrolerze -->
<p><button ng-click = "addElement()">Dodaj delikwenta</button></p>
</body>
<script>
// tworzę moduł aplikacji za pomocą metody module, która jako argumenty przyjmuje
let app = angular.module(
"myFirstAngularApplicationEver", // nazwę zawartą w atrybucie ng-app
[] // listę modułów, od których tworzony moduł będzie zależny (domyślnie może być pusta)
);
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}
];
// tworzę funkcję, która podpięta będzie pod kliknięcie przycisku z wykorzystaniem atrybutu ng-click
$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ę!");
}
}
});
</script>
</html>
