Tabelid on üks levinumaid elemente, mida HTML-is veebilehtedega töötamisel kasutatakse.
HTML-i tabelid on kujundatud HTML-märgendi abil
silt - see on peamine silt, mida kasutatakse tabeli kuvamiseks.
- seda silti kasutatakse tabeli ridade eraldamiseks.
- seda silti kasutatakse tabeli tegelike andmete kuvamiseks.
- seda kasutatakse tabeli päise andmete jaoks.
Kasutades ülaltoodud saadaolevaid HTML-silte koos AngularJS-iga, saame tabeliandmete täitmise hõlbustada. Lühidalt öeldes kasutatakse tabeli andmete täitmiseks käsku ng-repeat.
Kuidas seda saavutada, uurime selle peatüki jooksul. Samuti uurime, kuidas saaksime nurktabeli indeksite kuvamiseks kasutada orderby ja suurtähefiltrit ning atribuudi $ index kasutamist.
Selles õpetuses saate teada
Andmete sisestamine ja kuvamine tabelis
AngularJS sisseehitatud filter
Sorteeri tabel filtriga OrderBy
Kuva suurte filtritega tabel
Kuva tabeli register ($ indeks)
Andmete sisestamine ja kuvamine tabelis
Nagu me selle peatüki sissejuhatuses arutlesime, jääb HTML-lehe tabelistruktuuri loomise alus samaks.
Tabeli struktuur luuakse endiselt tavaliste HTML-märgendite
,
,
ja
abil. Kuid andmed täidetakse AnggJS-i ng-repeat-i direktiivi abil.
Vaatame lihtsat näidet selle kohta, kuidas saame nurktabeleid rakendada.
Selles näites
Loome nurktabeli, millel on kursuste teemad koos kirjeldustega.
Samm 1) Kõigepealt lisame oma HTML-lehele sildi "stiil", et tabelit saaks kuvada õige tabelina.
Stiilisilt lisatakse HTML-lehele. See on tavaline viis HTML-elementide jaoks vajalike vormindusatribuutide lisamiseks.
Lisame oma tabelisse kaks stiiliväärtust.
Üks on see, et meie nurgalaua jaoks peaks olema kindel piir ja
Teiseks on see, et meie nurktabeli andmete jaoks tuleks paigaldada polster.
2. samm. Järgmine samm on kirjutada kood tabeli loomiseks ja selle andmed.
Event Registration
Guru99 Global Event
{{ptutor.Name}}
{{ptutor.Description}}
Koodi selgitus:
Kõigepealt loome muutuja nimega "õpetus" ja määrame sellele ühe sammuna mõned võtme-väärtuse paarid. Iga võtme-väärtuse paari kasutatakse tabeli kuvamisel andmetena. Seejärel määratakse õpetuse muutuja ulatusobjektile, nii et sellele pääsete juurde meie vaates.
See on esimene samm tabeli loomisel ja kasutame märgendit
.
Iga andmerea jaoks kasutame "ng-repeat direktiivi". See direktiiv läbib tuto, rial scope objekti kõik võtme-väärtuste paarid muutuja ptutor abil.
Lõpuks kasutame nurktabeli andmete kuvamiseks märgendit
koos võtme-väärtuste paaridega (ptutor.Name ja ptutor.Description).
Kui kood on edukalt käivitatud, kuvatakse brauseris koodi käivitamisel järgmine väljund.
Väljund:
Ülaltoodud väljundi põhjal
Näeme, et tabel kuvatakse õigesti koos kontrolleris määratletud võtme-väärtuste paaride massiivi andmetega.
Tabeliandmed genereeriti iga võtme-väärtuse paari läbimisel "ng-replice" käsu abil.
AngularJS sisseehitatud filter
Andmete tabelites kuvamise viisi muutmiseks on AngularJS-is sisseehitatud filtrite kasutamine. Oleme juba varasemas peatükis näinud filtreid toimimas. Enne kui jätkame, korraldame filtrite kiire kokkuvõtte.
Filmis Angular.JS kasutatakse avaldise väärtuse vormindamiseks enne selle kasutajale kuvamist. Filtri näide on „suurtäht” filter, mis võtab stringiväljundi ja vormindab stringi ning kuvab kõik stringis olevad märgid suurtähtedena.
Nii et kui allpool toodud näites on muutuja 'TutorialName' väärtus 'AngularJS', on allpool oleva avaldise väljundiks 'ANGULARJS'.
{{TurotialName | suurtähed}}
Selles jaotises uurime, kuidas saab orderBy ja suurtähe filtreid tabelites üksikasjalikumalt kasutada.
Sorteeri tabel filtriga OrderBy
Seda filtrit kasutatakse tabeli sortimiseks ühe tabeli veeru põhjal. Eelmises näites ilmus meie nurgatabeli andmete väljund, nagu allpool näidatud.
Kontrollerid
Kontrollerid tegutsevad
Mudelid
Mudelid ja siduvad andmed
Direktiivid
Direktiivide paindlikkus
Vaatame näidet selle kohta, kuidas saame filtrit "orderBy" kasutada ja tabeli esimese veeru abil nurktabeli andmeid sortida.
Event Registration
Guru99 Global Event
{{ptutor.Name}}
{{ptutor.Description}}
Koodi selgitus:
Kasutame tabeli loomisel sama koodi, mida kasutasime, ainus erinevus on seekord see, et kasutame filtrit "orderBy" koos direktiiviga ng-repeat. Sel juhul ütleme, et tahame tabeli tellida võtme "Nimi" järgi.
Kui kood on edukalt käivitatud, kuvatakse brauseris koodi käivitamisel järgmine väljund.
Väljund:
Väljundi põhjal
Näeme, et tabeli Nurk andmed on järjestatud vastavalt esimese veeru andmetele. Meie andmestikus pärinevad andmed „Direktiivid” andmetest „Mudelid”, kuid kuna me rakendasime filtrit orderBy, sorteeritakse tabelid vastavalt.
Kuva suurte filtritega tabel
Samuti võime kasutada suurtähefiltrit, et muuta tabeli Nurk andmed suurte tähtedega.
Vaatame näite, kuidas seda saavutada.
Event Registration
Guru99 Global Event
{{ptutor.Name | uppercase}}
{{ptutor.Description}}
Koodi selgitus:
Kasutame tabeli loomisel sama koodi, mida kasutasime, ainus erinevus on seekord see, et kasutame suurtähefiltrit. Kasutame seda filtrit koos "ptutor.Name" -ga, nii et kogu esimese veeru tekst kuvatakse suurtähtedega.
Kui kood on edukalt käivitatud, kuvatakse brauseris koodi käivitamisel järgmine väljund.
Väljund:
Väljundi põhjal
Näeme, et filtrit "suurtähed" kasutades kuvatakse kõik esimese veeru andmed suurte tähtedega.
Kuva tabeli register ($ indeks)
Tabeli indeksi kuvamiseks lisage
koos indeksiga $.
Vaatame näite, kuidas seda saavutada.
Event Registration
Guru99 Global Event
{{$index + 1}}
{{ptutor.Name}}
{{ptutor.Description}}
Koodi selgitus:
Kasutame tabeli loomisel sama koodi, mida tegime, ainus erinevus on seekord see, et lisame tabelisse lisarea, et kuvada indeksveerg.
Selles täiendavas veerus kasutame AngularJS-i atribuuti "$ index" ja seejärel iga rea indeksi suurendamiseks operaatorit +1.
Kui kood on edukalt käivitatud, kuvatakse brauseris koodi käivitamisel järgmine väljund.
Väljund:
Väljundi põhjal
Näete, et on loodud täiendav veerg. Selles veerus näeme iga rea jaoks loodavaid indekseid.
Kokkuvõte:
Tabelistruktuurid luuakse HTML-is saadaolevate standardsete siltide abil. Tabelis olevad andmed täidetakse direktiivi "ng-repeat" abil.
Filtrit orderBy saab kasutada tabeli sortimiseks vastavalt tabeli mis tahes veerule.
Suure tähe filtrit saab kasutada andmete kuvamiseks suvalises tekstipõhises veerus.
Atribuudi "$ index" abil saab luua tabeli indeksi.
Üks levinud probleem, millega AngularJS.JS tabelite arendamisel kokku puututi, on suuremate andmekogumite juurutamine, millel on üle 1000 andmerea. Mõnikord võib ng-repeat direktiiv muutuda reageerimatuks ja seetõttu muutub kogu leht kohati reageerimata. Sellisel juhul on alati parem kasutada lehitsemist, kus andmeread on jaotatud mitmele lehele.
