Tabeller er et af de almindelige elementer, der bruges i HTML, når man arbejder med websider.
Tabeller i HTML er designet ved hjælp af HTML-tagget
tag - Dette er det vigtigste tag, der bruges til at vise tabellen.
- Dette tag bruges til at adskille rækkerne i tabellen.
- Dette tag bruges til at vise de faktiske tabeldata.
- Dette bruges til tabeloverskriftdata.
Ved hjælp af ovenstående tilgængelige HTML-tags sammen med AngularJS kan vi gøre det lettere at udfylde tabeldata. Kort sagt bruges ng-repeat-direktivet til at udfylde tabeldata.
Vi vil se på, hvordan man opnår dette i dette kapitel. Vi vil også se på, hvordan vi kan bruge ordre- og store filtre sammen med $ index-attributten til at vise kantede tabelindekser.
I denne vejledning lærer du-
Udfyld og vis data i en tabel
AngularJS indbygget filter
Sorter tabel med OrderBy Filter
Vis tabel med store bogstaver
Vis tabelindekset ($ -indeks)
Udfyld og vis data i en tabel
Som vi diskuterede i indledningen til dette kapitel, er grundlaget for oprettelse af tabelstrukturen på en HTML-side det samme.
Tabellens struktur oprettes stadig ved hjælp af de normale HTML-tags
,
,
og
. Dataene udfyldes dog ved hjælp af ng-gentagelsesdirektivet i AngularJS.
Lad os se på et simpelt eksempel på, hvordan vi kan implementere kantede tabeller.
I dette eksempel
Vi skal oprette en kantet tabel, der vil have kursusemner sammen med deres beskrivelser.
Trin 1) Vi skal først tilføje et "stil" -tag til vores HTML-side, så tabellen kan vises som en ordentlig tabel.
Stilmærket føjes til HTML-siden. Dette er standardmetoden til at tilføje formateringsattributter, der kræves til HTML-elementer.
Vi tilføjer to stilværdier til vores tabel.
Den ene er, at der skal være en solid grænse for vores kantede bord og
For det andet er, at der skal placeres polstring til vores vinklede tabeldata.
Trin 2) Det næste trin er at skrive koden for at generere tabellen, og dens data.
Event Registration
Guru99 Global Event
{{ptutor.Name}}
{{ptutor.Description}}
Kode Forklaring:
Vi opretter først en variabel kaldet "tutorial" og tildeler den nogle nøgleværdipar i et trin. Hvert nøgleværdipar vil blive brugt som data, når tabellen vises. Vejledningsvariablen tildeles derefter omfangsobjektet, så det er tilgængeligt fra vores synspunkt.
Dette er det første trin i oprettelse af en tabel, og vi bruger tagget
.
For hver række data bruger vi "ng-gentagelsesdirektivet". Dette direktiv gennemgår hvert nøgleværdipar i tuto, rial scope-objektet ved hjælp af variablen ptutor.
Endelig bruger vi tagget
sammen med nøgleværdiparene (ptutor.Name og ptutor.Description) til at vise data om vinkletabellen.
Hvis koden udføres med succes, vises følgende output, når du kører din kode i browseren.
Produktion:
Fra ovenstående output,
Vi kan se, at tabellen vises korrekt med dataene fra arrayet af nøgleværdipar defineret i controlleren.
Tabeldataene blev genereret ved at gå gennem hvert af nøgleværdiparene ved hjælp af "ng-gentagelsesdirektivet".
AngularJS indbygget filter
Det er meget almindeligt at bruge de indbyggede filtre i AngularJS til at ændre den måde, dataene vises på i tabellerne. Vi har allerede set filtre i aktion i et tidligere kapitel. Lad os få et hurtigt resumé af filtre, inden vi fortsætter.
I Angular.JS-filtre bruges til at formatere udtrykets værdi, før det vises for brugeren. Et eksempel på et filter er 'store bogstaver', der tager en strengoutput og formaterer strengen og viser alle tegn i strengen som store bogstaver.
Så i nedenstående eksempel, hvis værdien af variablen 'TutorialName' er 'AngularJS', vil output fra nedenstående udtryk være 'ANGULARJS'.
{{TurotialName | store bogstaver }}
I dette afsnit vil vi se på, hvordan orderBy og store bogstaver kan bruges i tabeller mere detaljeret.
Sorter tabel med OrderBy Filter
Dette filter bruges til at sortere tabellen ud fra en af tabelkolonnerne. I det foregående eksempel fremkom output for vores Angular-tabel-data som vist nedenfor.
Controllere
Controllere i aktion
Modeller
Modeller og bindende data
Direktiver
Direktivers fleksibilitet
Lad os se på et eksempel på, hvordan vi kan bruge filteret "orderBy" og sortere vinkletabeldataene ved hjælp af den første kolonne i tabellen.
Event Registration
Guru99 Global Event
{{ptutor.Name}}
{{ptutor.Description}}
Kode Forklaring:
Vi bruger den samme kode som vi gjorde til oprettelse af vores tabel, den eneste forskel denne gang er, at vi bruger "orderBy" -filteret sammen med ng-repeat-direktivet. I dette tilfælde siger vi, at vi vil bestille bordet med nøglen "Navn".
Hvis koden udføres med succes, vises følgende output, når du kører din kode i browseren.
Produktion:
Fra output,
Vi kan se, at dataene i vinkletabellen er sorteret efter dataene i den første kolonne. I vores datasæt kommer "Direktiver" -dataene fra "Modeller" -data, men fordi vi anvendte ordrenBy-filteret, sorteres tabellerne i overensstemmelse hermed.
Vis tabel med store bogstaver
Vi kan også bruge store bogstaver til at ændre dataene i vinkletabellen til store bogstaver.
Lad os se på et eksempel på, hvordan vi kan opnå dette.
Event Registration
Guru99 Global Event
{{ptutor.Name | uppercase}}
{{ptutor.Description}}
Kode Forklaring:
Vi bruger den samme kode som vi gjorde til oprettelse af vores tabel, den eneste forskel denne gang er, at vi bruger det store filter. Vi bruger dette filter i forbindelse med "ptutor.Name", så al teksten i den første kolonne vises med store bogstaver.
Hvis koden udføres med succes, vises følgende output, når du kører din kode i browseren.
Produktion:
Fra output,
Vi kan se, at ved hjælp af "store bogstaver" -filteret vises alle data i den første kolonne med store bogstaver.
Vis tabelindekset ($ -indeks)
For at få vist tabelindekset skal du tilføje et
med $ -indeks.
Lad os se på et eksempel på, hvordan vi kan opnå dette.
Event Registration
Guru99 Global Event
{{$index + 1}}
{{ptutor.Name}}
{{ptutor.Description}}
Kode Forklaring:
Vi bruger den samme kode som vi gjorde til oprettelse af vores tabel, den eneste forskel denne gang er, at vi tilføjer en ekstra række til vores tabel for at få vist kolonnen Indeks.
I denne ekstra kolonne bruger vi egenskaben "$ index" leveret af AngularJS og bruger derefter +1-operatoren til at øge indekset for hver række.
Hvis koden udføres med succes, vises følgende output, når du kører din kode i browseren.
Produktion:
Fra output,
Du kan se, at der er oprettet en ekstra kolonne. I denne kolonne kan vi se de indekser, der oprettes for hver række.
Resumé:
Tabelstrukturer oprettes ved hjælp af de standardtags, der er tilgængelige inden for HTML. Dataene i tabellen udfyldes ved hjælp af "ng-repeat" -direktivet.
OrderBy-filteret kan bruges til at sortere tabellen ud fra en hvilken som helst kolonne i tabellen.
Det store bogstav kan bruges til at vise dataene i enhver tekstbaseret kolonne med store bogstaver.
Egenskaben "$ index" kan bruges til at oprette et indeks til tabellen.
Et almindeligt problem, der er stødt på under udvikling med AngularJS.JS-tabeller, er implementeringen af store datasæt, der har mere end 1000 rækker med data. Undertiden kan ng-gentagelsesdirektivet ikke reagerer, og hele siden reagerer derfor undertiden ikke. I et sådant tilfælde er det altid bedre at have pagination, hvor datarækkerne er spredt på flere sider.
