Tablice su jedan od uobičajenih elemenata koji se koriste u HTML-u pri radu s web-stranicama.
Tablice u HTML-u dizajnirane su pomoću HTML oznake
oznaka
- ovo je glavna oznaka koja se koristi za prikaz tablice.
- Ova se oznaka koristi za razdvajanje redova unutar tablice.
- Ova se oznaka koristi za prikaz stvarnih podataka tablice.
- Ovo se koristi za podatke zaglavlja tablice.
Koristeći gore dostupne HTML oznake zajedno s AngularJS-om, možemo olakšati popunjavanje podataka tablice. Ukratko, ng-repeat direktiva koristi se za popunjavanje podataka tablice.
Tijekom ovog poglavlja razmotrit ćemo kako to postići. Također ćemo pogledati kako možemo koristiti filtre poreda i velikih slova, zajedno s atributom $ index za prikaz indeksa kutne tablice.
U ovom vodiču naučit ćete-
Popuni i prikaži podatke u tablici
Ugrađeni filtar AngularJS
Poredaj tablicu s filtrom OrderBy
Prikaz tablice s velikim slovom
Prikaži indeks tablice ($ indeks)
Popuni i prikaži podatke u tablici
Kao što smo raspravljali u uvodu ovog poglavlja, osnova za stvaranje strukture tablice na HTML stranici ostaje ista.
Struktura tablice i dalje se stvara pomoću uobičajenih HTML oznaka
,
,
i
. Međutim, podaci se popunjavaju upotrebom ng-repeat direktive u AngularJS.
Pogledajmo jednostavan primjer kako možemo implementirati Angular tablice.
U ovom primjeru,
Stvorit ćemo kutnu tablicu koja će sadržavati teme tečaja zajedno s njihovim opisima.
Korak 1) Prvo ćemo dodati oznaku "style" na našu HTML stranicu kako bi se tablica mogla prikazati kao odgovarajuća tablica.
Oznaka stila dodaje se na HTML stranicu. Ovo je standardni način dodavanja bilo kakvih atributa formatiranja koji su potrebni za HTML elemente.
U našu tablicu dodajemo dvije vrijednosti stila.
Jedna je da bi za naš Kutni stol trebala postojati čvrsta granica i
Drugo je da za naše podatke kutne tablice treba postaviti obloge.
Korak 2) Sljedeći korak je pisanje koda za generiranje tablice i njezinih podataka.
Event Registration
Guru99 Global Event
{{ptutor.Name}}
{{ptutor.Description}}
Objašnjenje koda:
Prvo stvaramo varijablu koja se naziva "tutorial" i dodijeljujemo joj nekoliko parova ključ / vrijednost u jednom koraku. Svaki par ključ / vrijednost koristit će se kao podaci prilikom prikazivanja tablice. Vodič varijable tada se dodjeljuje objektu opsega tako da joj se može pristupiti iz našeg pogleda.
Ovo je prvi korak u stvaranju tablice i koristimo oznaku
.
Za svaki redak podataka koristimo "ng-repeat direktivu". Ova direktiva prolazi kroz svaki par ključ / vrijednost u tuto, rial objektu opsega pomoću varijable ptutor.
Na kraju, koristimo oznaku
zajedno s parovima ključ / vrijednost (ptutor.Name i ptutor.Description) za prikaz podataka tablice Angular.
Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete svoj kôd u pregledniku.
Izlaz:
Iz gornjeg rezultata,
Vidimo da se tablica pravilno prikazuje s podacima iz niza parova ključ / vrijednost definiranim u kontroleru.
Podaci tablice generirani su prolaskom kroz svaki od parova ključ / vrijednost upotrebom "direktive ng-repeat".
Ugrađeni filtar AngularJS
Uobičajena je upotreba ugrađenih filtara unutar AngularJS za promjenu načina prikaza podataka u tablicama. Filtere smo već vidjeli na djelu u ranijem poglavlju. Idemo na brzinu sažeti filtre prije nego što nastavimo.
U Angular.JS filtri se koriste za formatiranje vrijednosti izraza prije nego što se on prikaže korisniku. Primjer filtra je filtar 'velika slova' koji uzima izlaz niza i formatira niz te prikazuje sve znakove u nizu kao velika slova.
Dakle, u primjeru ispod, ako je vrijednost varijable 'TutorialName' 'AngularJS', izlaz donjeg izraza bit će 'ANGULARJS'.
{{TurotialName | veliko slovo}}
U ovom ćemo odjeljku detaljnije pogledati kako se filtri orderBy i velika slova mogu detaljnije koristiti u tablicama.
Poredaj tablicu s filtrom OrderBy
Ovaj se filtar koristi za sortiranje tablice na temelju jednog od stupaca tablice. U prethodnom primjeru, izlaz za naše podatke tablice kutnih prikazao se kao što je prikazano u nastavku.
Kontroleri
Kontrolori u akciji
Modeli
Modeli i obvezujući podaci
Direktive
Fleksibilnost direktiva
Pogledajmo primjer, na koji način možemo koristiti filtar "orderBy" i sortirati podatke tablice Angular pomoću prvog stupca u tablici.
Event Registration
Guru99 Global Event
{{ptutor.Name}}
{{ptutor.Description}}
Objašnjenje koda:
Koristimo isti kôd kao i za izradu naše tablice, jedina razlika je ovaj put što koristimo filtar "orderBy" zajedno s ng-repeat direktivom. U ovom slučaju kažemo da želimo poredati tablicu tipkom "Ime".
Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete svoj kôd u pregledniku.
Izlaz:
Iz rezultata,
Vidimo da su podaci u kutnoj tablici razvrstani prema podacima u prvom stupcu. U našem skupu podataka podaci "Direktive" potječu iz podataka "Modeli", no budući da smo primijenili filtar orderBy, tablice se prema tome sortiraju.
Prikaz tablice s velikim slovom
Također možemo koristiti filter velikog slova za promjenu podataka u tablici Kutni u velika slova.
Pogledajmo primjer kako to možemo postići.
Event Registration
Guru99 Global Event
{{ptutor.Name | uppercase}}
{{ptutor.Description}}
Objašnjenje koda:
Koristimo isti kôd kao i za izradu tablice, jedina razlika ovog puta je u tome što koristimo filter velikog slova. Ovaj filtar koristimo zajedno s "ptutor.Name", tako da će sav tekst u prvom stupcu biti prikazan velikim slovom.
Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete svoj kôd u pregledniku.
Izlaz:
Iz rezultata,
Vidimo da se upotrebom filtra "velika slova" svi podaci u prvom stupcu prikazuju velikim slovima.
Prikaži indeks tablice ($ indeks)
Da biste prikazali indeks tablice, dodajte
s $ index.
Pogledajmo primjer kako to možemo postići.
Event Registration
Guru99 Global Event
{{$index + 1}}
{{ptutor.Name}}
{{ptutor.Description}}
Objašnjenje koda:
Koristimo isti kod kao i za izradu naše tablice, jedina razlika je ovaj put što u tablicu dodajemo dodatni redak za prikaz stupca indeksa.
U ovom dodatnom stupcu koristimo svojstvo "$ index" koje pruža AngularJS, a zatim pomoću +1 operatora povećavamo indeks za svaki redak.
Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete svoj kôd u pregledniku.
Izlaz:
Iz rezultata,
Možete vidjeti da je stvoren dodatni stupac. U ovom stupcu možemo vidjeti indekse koji se kreiraju za svaki redak.
Sažetak:
Strukture tablica kreiraju se pomoću standardnih oznaka dostupnih u HTML-u. Podaci u tablici popunjavaju se pomoću "ng-repeat" direktive.
Filtar orderBy može se koristiti za sortiranje tablice prema bilo kojem stupcu unutar tablice.
Filtriranje velikih slova može se koristiti za prikaz podataka u bilo kojem stupcu temeljenom na tekstu velikim slovima.
Svojstvo "$ index" može se koristiti za stvaranje indeksa za tablicu.
Jedan od uobičajenih problema s kojima se susreće tijekom razvoja tablica AngularJS.JS je implementacija velikih skupova podataka koji imaju više od 1000 redaka podataka. Ponekad direktiva ng-repeat može postati nereaktivna, a time i cijela stranica ponekad ne reagira. U takvom slučaju uvijek je bolje imati paginaciju u kojoj se redovi podataka šire na više stranica.
