Tabele so eden najpogostejših elementov, ki se v HTML uporabljajo pri delu s spletnimi stranmi.
Tabele v HTML so oblikovane z uporabo oznake HTML
oznaka
- to je glavna oznaka, ki se uporablja za prikaz tabele.
- Ta oznaka se uporablja za ločevanje vrstic v tabeli.
- Ta oznaka se uporablja za prikaz dejanskih podatkov tabele.
- Uporablja se za podatke v glavi tabele.
Z uporabo zgornjih razpoložljivih oznak HTML skupaj z AngularJS lahko olajšamo izpolnjevanje podatkov tabele. Skratka, direktiva ng-repeat se uporablja za izpolnjevanje podatkov tabele.
V tem poglavju bomo preučili, kako to doseči. Preučili bomo tudi, kako lahko uporabimo filtre vrstnega reda in velike črke ter atribut $ index za prikaz indeksov kotnih tabel.
V tej vadnici boste izvedeli-
Popolni in prikaži podatke v tabeli
Vgrajeni filter AngularJS
Razvrsti tabelo s filtrom OrderBy
Prikaži tabelo z velikimi črkami
Prikaz indeksa tabele (indeks $)
Popolni in prikaži podatke v tabeli
Kot smo razpravljali v uvodu tega poglavja, ostaja osnova za ustvarjanje strukture tabel na strani HTML enaka.
Struktura tabele je še vedno ustvarjena z običajnimi oznakami HTML
,
,
in
. Vendar se podatki zapolnijo z uporabo direktive ng-repeat v AngularJS.
Poglejmo preprost primer, kako lahko implementiramo kotne tabele.
V tem primeru
Ustvarili bomo kotno tabelo, ki bo vsebovala teme predmetov skupaj z njihovimi opisi.
1. korak) Najprej bomo na našo stran HTML dodali oznako "style", da bo tabela lahko prikazana kot ustrezna tabela.
Oznaka sloga se doda na stran HTML. To je standardni način dodajanja kakršnih koli atributov oblikovanja, ki so potrebni za elemente HTML.
V tabelo dodajamo dve vrednosti sloga.
Ena je ta, da mora obstajati trdna obroba za našo kotno mizo in
Drugič je, da je treba za naše podatke kotne tabele vzpostaviti oblazinjenje.
Korak 2) Naslednji korak je pisanje kode za generiranje tabele in njenih podatkov.
Event Registration
Guru99 Global Event
{{ptutor.Name}}
{{ptutor.Description}}
Razlaga kode:
Najprej ustvarimo spremenljivko, imenovano "tutorial", in ji v enem koraku dodelimo nekaj parov ključ-vrednost. Vsak par ključ-vrednost bo uporabljen kot podatek pri prikazu tabele. Nato je spremenljivka vadnice dodeljena predmetu obsega, tako da je do nje mogoče dostopati iz našega pogleda.
To je prvi korak pri ustvarjanju tabele in uporabljamo oznako
.
Za vsako vrstico podatkov uporabljamo "direktivo ng-repeat". Ta direktiva gre skozi vsak par ključ-vrednost v objektu tuto, rial z uporabo spremenljivke ptutor.
Nazadnje za prikaz podatkov tabele Angular uporabljamo oznako
skupaj s pari ključ / vrednost (ptutor.Name in ptutor.Description).
Če se koda uspešno izvede, se pri zagonu kode v brskalniku prikaže naslednji izhod.
Izhod:
Iz zgornjega izhoda
Vidimo lahko, da je tabela pravilno prikazana s podatki iz niza parov ključ-vrednost, definiranimi v krmilniku.
Podatki tabele so bili ustvarjeni s prehodom skozi vsak par ključ-vrednost z uporabo "direktive ng-repeat".
Vgrajeni filter AngularJS
Zelo pogosta je uporaba vgrajenih filtrov v programu AngularJS za spreminjanje načina prikaza podatkov v tabelah. V prejšnjem poglavju smo že videli delujoče filtre. Preden nadaljujemo, na hitro ponovimo filtre.
V Angular.JS filtri se uporabljajo za oblikovanje vrednosti izraza, preden se prikaže uporabniku. Primer filtra je filter z velikimi črkami, ki prevzame niz in oblikuje niz ter prikaže vse znake v nizu kot velike črke.
Torej, v spodnjem primeru, če je vrednost spremenljivke "TutorialName" "AngularJS", bo rezultat spodnjega izraza "ANGULARJS".
{{TurotialName | velike črke }}
V tem razdelku bomo podrobneje preučili, kako lahko filtre orderBy in velike črke uporabimo v tabelah.
Razvrsti tabelo s filtrom OrderBy
Ta filter se uporablja za razvrščanje tabele na podlagi enega od stolpcev tabele. V prejšnjem primeru so bili rezultati za naše podatke tabele Angular prikazani, kot je prikazano spodaj.
Krmilniki
Krmilniki v akciji
Modeli
Modeli in podatki vezave
Direktiv
Prilagodljivost direktiv
Oglejmo si primer, kako lahko uporabimo filter "orderBy" in razvrstimo podatke tabele Angular s pomočjo prvega stolpca v tabeli.
Event Registration
Guru99 Global Event
{{ptutor.Name}}
{{ptutor.Description}}
Razlaga kode:
Uporabljamo isto kodo kot pri ustvarjanju tabele, edina razlika je tokrat, da uporabljamo filter "orderBy" skupaj z direktivo ng-repeat. V tem primeru pravimo, da želimo tabelo razvrstiti po tipki "Ime".
Če se koda uspešno izvede, se pri zagonu kode v brskalniku prikaže naslednji izhod.
Izhod:
Iz rezultata,
Vidimo lahko, da so bili podatki v tabeli Angular razvrščeni glede na podatke v prvem stolpcu. V našem naboru podatkov podatki "Direktive" izvirajo iz podatkov "Modeli", ker pa smo uporabili filter orderBy, se tabele ustrezno razvrstijo.
Prikaži tabelo z velikimi črkami
Z velikim filtrom lahko podatke v tabeli Angular spremenimo tudi v velike.
Oglejmo si primer, kako lahko to dosežemo.
Event Registration
Guru99 Global Event
{{ptutor.Name | uppercase}}
{{ptutor.Description}}
Razlaga kode:
Uporabljamo isto kodo kot pri ustvarjanju tabele, edina razlika je tokrat, da uporabljamo filter z velikimi črkami. Ta filter uporabljamo skupaj z "ptutor.Name", tako da bo celotno besedilo v prvem stolpcu prikazano z velikimi črkami.
Če se koda uspešno izvede, se pri zagonu kode v brskalniku prikaže naslednji izhod.
Izhod:
Iz rezultata,
Vidimo lahko, da so z uporabo filtra "velika črka" vsi podatki v prvem stolpcu prikazani z velikimi črkami.
Prikaz indeksa tabele (indeks $)
Če želite prikazati indeks tabele, dodajte
z $ index.
Oglejmo si primer, kako lahko to dosežemo.
Event Registration
Guru99 Global Event
{{$index + 1}}
{{ptutor.Name}}
{{ptutor.Description}}
Razlaga kode:
Uporabljamo isto kodo kot pri ustvarjanju tabele, edina razlika je to, da v tabelo dodajamo dodatno vrstico za prikaz stolpca indeksa.
V tem dodatnem stolpcu uporabljamo lastnost "$ index", ki jo nudi AngularJS, nato pa z uporabo operatorja +1 povečamo indeks za vsako vrstico.
Če se koda uspešno izvede, se pri zagonu kode v brskalniku prikaže naslednji izhod.
Izhod:
Iz rezultata,
Vidite, da je bil ustvarjen dodaten stolpec. V tem stolpcu lahko vidimo indekse, ki se ustvarjajo za vsako vrstico.
Povzetek:
Strukture tabel so ustvarjene z uporabo standardnih oznak, ki so na voljo v HTML-ju. Podatki v tabeli se zapolnijo z direktivo "ng-repeat".
Filter orderBy lahko uporabite za razvrščanje tabele glede na kateri koli stolpec v tabeli.
Z velikimi črkami lahko podatke prikažete v poljubnem besedilnem stolpcu z velikimi črkami.
Lastnost "$ index" lahko uporabite za ustvarjanje indeksa za tabelo.
Pogosta težava, s katero smo se srečali med razvojem tabel AngularJS.JS, je izvajanje velikih naborov podatkov, ki imajo več kot 1000 vrstic podatkov. Včasih lahko direktiva ng-repeat postane neodzivna in zato včasih celotna stran postane neodzivna. V takem primeru je vedno bolje imeti paginacijo, v kateri so vrstice podatkov razporejene na več straneh.
