<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta
charset="UTF-8">
<title>Menetrend Táblázat</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
<label
for="fromSelect">Honnan:</label>
<select id="fromSelect"
ng-model="fromFilter">
<option
value="">Összes indulási állomás</option>
<option
ng-repeat="location in locations"
value="{{location}}">{{location}}</option>
</select>
<label for="toSelect">Hova:</label>
<select id="toSelect"
ng-model="toFilter">
<option
value="">Összes érkezési állomás</option>
<option
ng-repeat="location in locations"
value="{{location}}">{{location}}</option>
</select>
<input type="text" ng-model="searchText"
placeholder="Keresés...">
<br>
<table border="1">
<thead>
<tr>
<th
ng-click="sortBy('azon')">Azon</th>
<th
ng-click="sortBy('jarat')">Járat</th>
<th
ng-click="sortBy('honnan')">Honnan</th>
<th ng-click="sortBy('hova')">Hova</th>
<th
ng-click="sortBy('indul')">Indul</th>
<th
ng-click="sortBy('erkezik')">Érkezik</th>
</tr>
</thead>
<tbody>
<!-- A ng-repeat attribútum értéke az a kifejezés, amely
leírja, hogy milyen adatok alapján kell a sorokat generálni.
menet in filteredMenetrend:menet a jelenlegi iterációban
használt változó neve. Minden iteráció során ez a változó egy-egy elemre mutat
majd a menetrend tömbből.
filteredMenetrend -> a szűrt menetrend adatait tartalmazó
változó. Ezt a változót létrehozza az AngularJS, és a ng-repeat során
használható.
(menetrend | filter:{'honnan': fromFilter, 'hova': toFilter}
| orderBy:orderByField:reverseSort | filter:searchText):
Ez a rész a szűrők és rendezés alkalmazását írja le a
menetrend tömbre.
Az első filter szűri az elemeket a 'honnan' és 'hova'
tulajdonságok alapján a fromFilter és toFilter változók értékei szerint.
Az orderBy a rendezést végzi el az adott mező alapján
(orderByField).
A reverseSort változó határozza meg, hogy a sorrend növekvő
vagy csökkenő legyen.
A második filter szűri az elemeket a searchText változó
alapján.-->
<tr
ng-repeat="menet in filteredMenetrend = (menetrend | filter:{'honnan':
fromFilter, 'hova': toFilter} | orderBy:orderByField:reverseSort |
filter:searchText)">
<!--Így a teljes kifejezés azt az utasítást adja, hogy
hozzon létre egy sorral, minden menet elemet a filteredMenetrend változóból,
amely a megfelelően szűrt, rendezett és keresett adatokat tartalmazza a
menetrend tömb alapján.
Ez a sor az AngularJS kifejezéseinek összefonódásából
adódik, ahol minden egyes művelet eredménye továbbítódik a következő művelet
bemeneteként.-->
<td>{{ menet.azon }}</td>
<td>{{ menet.jarat }}</td>
<td>{{ menet.honnan }}</td>
<td>{{ menet.hova }}</td>
<td>{{ menet.indul }}</td>
<td>{{ menet.erkezik }}</td>
</tr>
</tbody>
</table>
<script>
var app =
angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $http) {
$http.get('menetrend.json').then(function (response) {
$scope.menetrend = response.data;
/*new Set(...):A Set egy olyan adatstruktúra, amely csak
egyedi elemeket tartalmaz. Itt egy Set-et hozunk létre a fenti egyesített
tömbből. Ezzel biztosítjuk, hogy minden helyszín csak egyszer szerepeljen a
Set-ben.
[...Set]:
A Set objektum tartalmát egy spread operátorral (...)
alakítjuk át egy tömbbé. Így a $scope.locations változó egy olyan tömb lesz,
amely csak az egyedi 'honnan' és 'hova' értékeket tartalmazza.*/
$scope.locations = [...new Set(response.data.map(item =>
item.honnan).concat(response.data.map(item => item.hova)))];
/*response.data.map(item =>
item.honnan):
Az response.data egy tömb, ami a szerver válaszának adatait
tartalmazza (a menetrend adatait).
A map metódus segítségével az összes item elemet leképezzük
a hozzájuk tartozó 'honnan' tulajdonságra.
response.data.map(item => item.hova):
Hasonlóan, ebben a részben a 'hova' tulajdonságot map-eljük.
.concat(...): A concat metódus segítségével a két fenti
lépés eredményét egyesítjük egyetlen tömbben. Tehát létrehozunk egy olyan
tömböt, amely tartalmazza az összes 'honnan' és 'hova' értéket.
Ez a kód tehát egy olyan helyszín tömböt hoz létre, amely
tartalmazza az összes egyedi 'honnan' és 'hova' helyszínt a menetrend
adataiból. Ez a tömb később használható a szűrési opciók kialakításához a
felhasználói felületen.*/
//
Initialize filter variables
$scope.fromFilter = "";
$scope.toFilter = "";
// Default
sort
$scope.orderByField = 'erkezik';
$scope.reverseSort = false;
});
$scope.sortBy
= function (field) {
$scope.reverseSort = ($scope.orderByField === field) ?
!$scope.reverseSort : false;
$scope.orderByField = field;
/*$scope.sortBy = function (field) { ... }:
Ez egy függvény definíciója, amelyet a táblázat fejlécében
lévő kattintható fejléc mezőkhöz kötnek. Amikor a felhasználó a táblázat egy
fejléc mezőjére kattint, a sortBy függvény fut le, és rendezni fogja az
adatokat az adott mező alapján.
$scope.reverseSort = ($scope.orderByField === field) ?
!$scope.reverseSort : false;:
Ez a sor megállapítja, hogy a rendezési sorrend növekvő vagy
csökkenő legyen.
Az ($scope.orderByField === field) rész azt ellenőrzi, hogy
a jelenlegi rendezési mező egyezik-e az újonnan kiválasztott mezővel.
A ? utáni rész egy feltételes (ternary) operátor, amely
megváltoztatja a reverseSort értékét attól függően, hogy a jelenlegi rendezési
mező megegyezik-e az újonnan kiválasztott mezővel. Ha igen, akkor a
!$scope.reverseSort inverzezi a jelenlegi értéket (azaz ha true, akkor false,
és fordítva), ha nem, akkor false.
Tehát ez a rész megoldja azt a feladatot, hogy
megváltoztassa a rendezési sorrendet, ha a felhasználó ugyanarra a mezőre
kattint, különben állítsa be a rendezési sorrendet a kiválasztott mező alapján.
$scope.orderByField = field;:
Ez a sor beállítja a $scope.orderByField változót a
kiválasztott mező nevére, amely szerint rendezni kell az adatokat.
Összességében a $scope.sortBy függvény felelős a táblázat
rendezéséért. Ha a felhasználó ugyanarra a mezőre kattint, akkor megfordítja a
rendezési sorrendet, különben beállítja a rendezési mezőt az újonnan
kiválasztott mezőre. Ez lehetővé teszi a táblázat interaktív és dinamikus
rendezését a felhasználó számára.
*/
};
});
</script>
</body>
</html>
Nincsenek megjegyzések:
Megjegyzés küldése