A táblázatok az egyik leggyakoribb elem, amelyet a HTML a weblapokkal való munkavégzés során használ.
A HTML-táblázatok megtervezése a HTML-címke használatával történik
címke - Ez a tábla megjelenítéséhez használt fő címke.
- Ez a címke a táblán belüli sorok elkülönítésére szolgál.
- Ez a címke a tényleges táblaadatok megjelenítésére szolgál.
- Ez a táblázat fejléc adataira szolgál.
A fenti elérhető HTML-címkék és az AngularJS együttes használatával megkönnyíthetjük a táblázat adatainak feltöltését. Röviden: az ng-repeat direktívát használjuk a táblázat adatainak kitöltésére.
Megvizsgáljuk, hogyan lehet ezt elérni ebben a fejezetben. Megvizsgáljuk azt is, hogyan használhatjuk a orderby és a nagybetűs szűrőket, valamint a $ index attribútumot az Angular table indexek megjelenítésére.
Ebben az oktatóanyagban megtanulja-
Adatok feltöltése és megjelenítése táblázatban
AngularJS beépített szűrő
Táblázat rendezése a OrderBy szűrővel
Kijelző táblázat nagybetűs szűrővel
A táblázat indexének megjelenítése ($ index)
Adatok feltöltése és megjelenítése táblázatban
Amint a fejezet bevezetőjében tárgyaltuk, a táblázat struktúrájának HTML-alapon történő létrehozásának alapja ugyanaz marad.
A táblázat felépítése továbbra is a
,
,
és
HTML kódok segítségével jön létre. Az adatok azonban az AngularJS-ben az ng-repeat irányelv használatával kerülnek feltöltésre.
Nézzünk meg egy egyszerű példát arra, hogyan tudjuk megvalósítani az Angular táblákat.
Ebben a példában
Létrehozunk egy szögletes táblázatot, amely a kurzus témáit és azok leírását tartalmazza.
1. lépés : Először hozzáadunk egy "style" címkét a HTML oldalunkhoz, hogy a tábla megfelelő táblázatként jelenjen meg.
A stíluscímke hozzáadódik a HTML-oldalhoz. Ez a HTML-elemekhez szükséges formázási attribútumok hozzáadásának szokásos módja.
Két stílusértéket adunk táblázatunkhoz.
Az egyik az, hogy szilárd határnak kell lennie a szögletes asztalunknak és
A második az, hogy a szögletes táblázatok adatait helyezni kell.
2. lépés: A következő lépés a kód megírása a táblázat előállításához, és annak adatai.
Event Registration
Guru99 Global Event
{{ptutor.Name}}
{{ptutor.Description}}
Kód Magyarázat:
Először létrehozunk egy "tutorial" nevű változót, és egy lépésben hozzárendelünk hozzá néhány kulcs-érték párot. Minden kulcs-érték pár adatként lesz felhasználva a táblázat megjelenítésekor. Ezután az oktatói változó hozzá van rendelve a hatókörobjektumhoz, hogy az a mi nézetünkből elérhető legyen.
Ez a táblázat létrehozásának első lépése, és a
címkét használjuk.
Minden adatsorhoz az "ng-repeat direktíva" -t használjuk. Ez az irányelv a ptutor változó használatával végigmegy a tuto, rial hatókör objektum minden kulcs-érték párján.
Végül a
címkét a kulcs-érték párokkal (ptutor.Name és ptutor.Description) együtt használjuk az Angular table adatok megjelenítéséhez.
A kód sikeres végrehajtása esetén a következő kimenet jelenik meg, amikor a böngészőben futtatja a kódot.
Kimenet:
A fenti kimenetből
Láthatjuk, hogy a táblázat megfelelően jelenik meg a vezérlőben meghatározott kulcs-érték pár tömb adataival.
A táblázat adatait úgy állítottuk elő, hogy az "ng-repeat direktíva" használatával végignéztük az egyes kulcs-érték párokat.
AngularJS beépített szűrő
Nagyon gyakori az AngularJS-en belüli beépített szűrők használata az adatok táblázatokban történő megjelenítésének megváltoztatásához. A szűrőket működés közben már láttuk egy korábbi fejezetben. Vegyünk egy gyors összefoglalót a szűrőkről, mielőtt továbblépünk.
Az Angular.JS szűrőkkel formázza a kifejezés értékét, mielőtt az megjelenik a felhasználó számára. A szűrőre példa a „nagybetűs” szűrő, amely egy karakterlánc kimenetet vesz fel, formázza a karakterláncot, és a karakterlánc összes karakterét nagybetűként jeleníti meg.
Tehát az alábbi példában, ha a 'TutorialName' változó értéke 'AngularJS', akkor az alábbi kifejezés kimenete 'ANGULARJS' lesz.
{{TurotialName | nagybetűs }}
Ebben a szakaszban megvizsgáljuk, hogyan lehet a orderBy és a nagybetűs szűrőket részletesebben használni a táblázatokban.
Táblázat rendezése a OrderBy szűrővel
Ez a szűrő a táblázat rendezésére szolgál az egyik oszlop alapján. Az előző példában a szögtábla adataink kimenete az alábbiak szerint jelent meg.
Vezérlők
A vezérlők működés közben
Modellek
Modellek és kötelező adatok
Irányelvek
Az irányelvek rugalmassága
Nézzünk meg egy példát arra, hogyan használhatjuk a "orderBy" szűrőt és rendezhetjük a Szögletes táblázat adatait a táblázat első oszlopának felhasználásával.
Event Registration
Guru99 Global Event
{{ptutor.Name}}
{{ptutor.Description}}
Kód Magyarázat:
Ugyanazt a kódot használjuk, mint a táblánk elkészítéséhez, az egyetlen különbség ezúttal az, hogy a "orderBy" szűrőt használjuk az ng-repeat irányelvvel együtt. Ebben az esetben azt mondjuk, hogy a táblát a "Név" kulcs segítségével akarjuk megrendelni.
A kód sikeres végrehajtása esetén a következő kimenet jelenik meg, amikor a böngészőben futtatja a kódot.
Kimenet:
A kimenetből
Láthatjuk, hogy a Szögletes táblázat adatai az első oszlop adatai szerint vannak rendezve. Adatkészletünkben az "irányelvek" adatok a "modellek" adatokból származnak, de mivel a orderBy szűrőt alkalmaztuk, a táblázatok ennek megfelelően rendeződnek.
Kijelző táblázat nagybetűs szűrővel
A nagybetűs szűrőt is használhatjuk a Szögletes táblázat adatainak nagybetűvé változtatására.
Vessen egy pillantást arra, hogyan érhetjük el ezt.
Event Registration
Guru99 Global Event
{{ptutor.Name | uppercase}}
{{ptutor.Description}}
Kód Magyarázat:
Ugyanazt a kódot használjuk, mint a táblánk elkészítéséhez, az egyetlen különbség ezúttal az, hogy a nagybetűs szűrőt használjuk. Ezt a szűrőt a "ptutor.Name" -vel együtt használjuk, így az első oszlop teljes szövege nagybetűvel jelenik meg.
A kód sikeres végrehajtása esetén a következő kimenet jelenik meg, amikor a böngészőben futtatja a kódot.
Kimenet:
A kimenetből
Láthatjuk, hogy a "nagybetűs" szűrő használatával az első oszlop összes adata nagybetűs karakterekkel jelenik meg.
A táblázat indexének megjelenítése ($ index)
A táblaindex megjelenítéséhez adjon hozzá egy
-t $ indexszel.
Vessen egy pillantást arra, hogyan érhetjük el ezt.
Event Registration
Guru99 Global Event
{{$index + 1}}
{{ptutor.Name}}
{{ptutor.Description}}
Kód Magyarázat:
Ugyanazt a kódot használjuk, mint a táblánk elkészítéséhez, az egyetlen különbség ezúttal az, hogy egy további sort adunk a táblázatunkhoz az index oszlop megjelenítéséhez.
Ebben a további oszlopban az AngularJS által biztosított "$ index" tulajdonságot használjuk, majd a +1 operátorral növeljük az egyes sorok indexét.
A kód sikeres végrehajtása esetén a következő kimenet jelenik meg, amikor a böngészőben futtatja a kódot.
Kimenet:
A kimenetből
Láthatja, hogy létrejött egy további oszlop. Ebben az oszlopban láthatjuk az egyes sorokhoz létrehozott indexeket.
Összegzés:
A táblázatszerkezetek a HTML-ben elérhető szabványos címkék felhasználásával készülnek. A táblázat adatai az "ng-repeat" irányelv segítségével kerülnek feltöltésre.
A orderBy szűrővel a táblázatot a táblázat bármely oszlopa alapján rendezheti.
A nagybetűs szűrővel bármely nagybetűs szöveges oszlopban megjeleníthetők az adatok.
A "$ index" tulajdonság segítségével index hozható létre a táblázat számára.
Az AngularJS.JS táblázatok fejlesztése során felmerült egyik gyakori probléma az olyan nagy adatkészletek megvalósítása, amelyek több mint 1000 adatsort tartalmaznak. Előfordul, hogy az ng-repeat irányelv nem reagál, és ezáltal az egész oldal olykor nem reagál. Ilyen esetben mindig jobb, ha olyan lapozást alkalmazunk, amelyben az adatsorok több oldalra oszlanak el.
