AngularJS-tabell: Sorter, Bestill etter & Store bokstaver (eksempler)

La oss se på et enkelt eksempel på hvordan vi kan implementere vinkeltabeller.

I dette eksemplet,

Vi skal lage en kantet tabell som vil ha emner i emnet sammen med beskrivelsene.

Trinn 1) Vi skal først legge til en "stil" -kode på HTML-siden vår, slik at tabellen kan vises som en riktig tabell.

1. Stilkoden legges til HTML-siden. Dette er standard måten å legge til formateringsattributter som kreves for HTML-elementer.
2. Vi legger til to stilverdier til bordet vårt.

• Den ene er at det skal være en solid grense for vårt kantete bord og
• For det andre er at det skal være polstring på plass for våre kantete tabelldata.

Trinn 2) Det neste trinnet er å skrive koden for å generere tabellen, og dens data.

Guru99 Global Event


{{ptutor.Name}}
{{ptutor.Description}}

Kode Forklaring:

1. Vi lager først en variabel kalt "tutorial" og tildeler den noen nøkkelverdipar i ett trinn. Hvert nøkkelverdipar vil bli brukt som data når tabellen vises. Opplæringsvariabelen tildeles deretter omfangsobjektet slik at det er tilgjengelig fra vårt syn.
2. Dette er det første trinnet i å lage en tabell, og vi bruker taggen .
   For hver rad med data bruker vi "ng-repeat directive". Dette direktivet går gjennom hvert nøkkelverdipar i tuto, rial scope-objektet ved hjelp av variabelen ptutor.
   Til slutt bruker vi

   -taggen sammen med nøkkelverdiparene (ptutor.Name og ptutor.Description) for å vise dataene for vinkeltabellen. Hvis koden er utført vellykket, vil følgende utdata vises når du kjører koden din i nettleseren. Produksjon: Fra ovenstående utgang, Vi kan se at tabellen vises riktig med dataene fra matrisen av nøkkelverdipar definert i kontrolleren. Tabelldataene ble generert ved å gå gjennom hvert av nøkkelverdiparene ved å bruke "ng-repeat directive". AngularJS innebygd filter Det er veldig vanlig å bruke de innebygde filtrene i AngularJS for å endre måten dataene vises i tabellene. Vi har allerede sett filtre i aksjon i et tidligere kapittel. La oss få en kort oppsummering av filtre før vi fortsetter. I Angular.JS-filtre brukes til å formatere uttrykksverdien før den vises for brukeren. Et eksempel på et filter er 'store bokstaver' som tar en strengutgang og formaterer strengen og viser alle tegnene i strengen som store bokstaver. Så i eksemplet nedenfor, hvis verdien til variabelen 'Opplæringsnavn' er 'AngularJS', vil utdataene til uttrykket nedenfor være 'ANGULARJS'. {{TurotialName | stor bokstav }} I denne delen vil vi se på hvordan filterene orderBy og store bokstaver kan brukes i tabeller mer detaljert. Sorter tabell med OrderBy Filter Dette filteret brukes til å sortere tabellen basert på en av tabellkolonnene. I det forrige eksemplet dukket utdataene for Angular-tabelldataene opp som vist nedenfor. Kontrollere Kontrollere i aksjon Modeller Modeller og bindingsdata Direktiver Direktivers fleksibilitet La oss se på et eksempel på hvordan vi kan bruke filteret "orderBy" og sortere Angular-tabelldataene ved hjelp av den første kolonnen i tabellen. Guru99 Global Event {{ptutor.Name}} {{ptutor.Description}} Kode Forklaring: Vi bruker den samme koden som vi gjorde for å lage tabellen vår, den eneste forskjellen denne gangen er at vi bruker "orderBy" -filteret sammen med ng-repeat-direktivet. I dette tilfellet sier vi at vi vil bestille tabellen etter nøkkelen "Navn". Hvis koden er utført vellykket, vil følgende utdata vises når du kjører koden din i nettleseren. Produksjon: Fra utgangen, Vi kan se at dataene i Angular-tabellen er sortert i henhold til dataene i den første kolonnen. I datasettet vårt kommer "Direktiver" -dataene fra "Modeller" -data, men fordi vi brukte orderBy-filteret, blir tabellene sortert etter det. Vis tabell med store bokstaver Vi kan også bruke store bokstaver til å endre dataene i kantete tabell til store bokstaver. La oss se på et eksempel på hvordan vi kan oppnå dette. Guru99 Global Event {{ptutor.Name | uppercase}} {{ptutor.Description}} Kode Forklaring: Vi bruker den samme koden som vi gjorde for å lage tabellen vår, den eneste forskjellen denne gangen er at vi bruker store bokstaver. Vi bruker dette filteret sammen med "ptutor.Name", slik at all teksten i den første kolonnen vil vises med store bokstaver. Hvis koden er utført vellykket, vil følgende utdata vises når du kjører koden din i nettleseren. Produksjon: Fra utgangen, Vi kan se at ved å bruke "store bokstaver" -filteret vises alle dataene i den første kolonnen med store bokstaver. Vis tabellindeksen ($ indeks) For å vise tabellindeksen, legg til en

   med $ -indeks. La oss se på et eksempel på hvordan vi kan oppnå dette. Guru99 Global Event {{$index + 1}} {{ptutor.Name}} {{ptutor.Description}} Kode Forklaring: Vi bruker den samme koden som vi gjorde for å lage tabellen vår, den eneste forskjellen denne gangen er at vi legger til en ekstra rad i tabellen vår for å vise indekskolonnen. I denne tilleggskolonnen bruker vi "$ index" -egenskapen levert av AngularJS, og bruker deretter +1-operatøren til å øke indeksen for hver rad. Hvis koden er utført vellykket, vil følgende utdata vises når du kjører koden din i nettleseren. Produksjon: Fra utgangen, Du kan se at det er opprettet en ekstra kolonne. I denne kolonnen kan vi se indeksene som blir opprettet for hver rad. Sammendrag: Tabellstrukturer opprettes ved hjelp av standard koder tilgjengelig i HTML. Dataene i tabellen er fylt ut med "ng-repeat" -direktivet. OrderBy-filteret kan brukes til å sortere tabellen basert på en hvilken som helst kolonne i tabellen. Store bokstaver kan brukes til å vise dataene i hvilken som helst tekstbasert kolonne med store bokstaver. Egenskapen "$ index" kan brukes til å lage en indeks for tabellen. Et vanlig problem som oppstod under utviklingen med AngularJS.JS-tabeller er implementeringen av store datasett som har mer enn 1000 datarader. Noen ganger kan ng-repeat-direktivet ikke reagerer, og dermed reagerer ikke hele siden til tider. I et slikt tilfelle er det alltid bedre å ha paginering der dataradene er spredt over flere sider.