Taulukot ovat yksi yleisimmistä HTML-elementeistä, joita käytetään verkkosivujen kanssa työskenneltäessä.
HTML-taulukot on suunniteltu HTML-tagin avulla
-tunniste - Tämä on päätaulukko, jota käytetään taulukon näyttämiseen.
- Tätä tunnistetta käytetään taulukon rivien erottamiseen.
- Tätä tunnistetta käytetään varsinaisen taulukon tietojen näyttämiseen.
- Tätä käytetään taulukon otsikkotiedoissa.
Käyttämällä yllä olevia HTML-tunnisteita yhdessä AngularJS: n kanssa voimme helpottaa taulukon tietojen täyttämistä. Lyhyesti sanottuna ng-repeat-direktiiviä käytetään taulukon tietojen täyttämiseen.
Tarkastelemme, miten tämä voidaan saavuttaa tämän luvun aikana. Katsomme myös, kuinka voimme käyttää orderby- ja iso-suodattimia sekä $ index -attribuutin käyttämistä kulmataulukkoindeksien näyttämiseen.
Tässä opetusohjelmassa opit-
Täytä ja näytä tiedot taulukossa
Sisäänrakennettu kulmainen JS-suodatin
Lajittele taulukko OrderBy-suodattimella
Näyttötaulukko isoilla suodattimilla
Näytä taulukkoindeksi ($ -indeksi)
Täytä ja näytä tiedot taulukossa
Kuten keskustelimme tämän luvun johdannossa, taulukon rakenteen luomisen perusta HTML-sivulla pysyy samana.
Taulukon rakenne luodaan edelleen tavallisilla HTML-tunnisteilla
,
,
ja
. Tiedot kuitenkin täytetään käyttämällä ng-repeat-direktiiviä AngularJS: ssä.
Katsotaan yksinkertainen esimerkki siitä, miten voimme toteuttaa kulmataulukot.
Tässä esimerkissä
Aiomme luoda kulmataulukon, jossa on kurssin aiheet ja niiden kuvaukset.
Vaihe 1) Aiomme ensin lisätä "style" -tunnisteen HTML-sivuillemme, jotta taulukko voidaan näyttää oikealla taulukkona.
Tyylitunniste lisätään HTML-sivulle. Tämä on tavanomainen tapa lisätä kaikki HTML-elementteihin vaadittavat muotoilumääritteet.
Lisäämme taulukkoon kaksi tyyliarvoa.
Yksi on se, että kulmapöydällemme ja
Toiseksi on, että kulmapöydätiedoillemme tulee olla täytteet.
Vaihe 2) Seuraava vaihe on kirjoittaa koodi taulukon ja sen tietojen luomiseksi.
Event Registration
Guru99 Global Event
{{ptutor.Name}}
{{ptutor.Description}}
Koodin selitys:
Luomme ensin muuttujan nimeltä "opetusohjelma" ja määritämme sille joitain avainarvopareja yhdessä vaiheessa. Kutakin avainarvoparia käytetään datana taulukkoa näytettäessä. Opetusmuuttuja määritetään sitten laajuusobjektille, jotta sitä voidaan käyttää näkymästä.
Tämä on ensimmäinen vaihe taulukon luomisessa, ja käytämme
-tunnistetta.
Kullekin tietoriville käytämme "ng-replay-direktiiviä". Tämä direktiivi käy läpi kaikki avain-arvo-parit tuto, rial scope -objektissa muuttujan ptutor avulla.
Lopuksi käytämme
-tagia avainarvoparien (ptutor.Name ja ptutor.Description) kanssa kulmataulukon tietojen näyttämiseen.
Jos koodi suoritetaan onnistuneesti, seuraava tulos näkyy, kun suoritat koodin selaimessa.
Tuotos:
Yllä olevasta tuotoksesta
Voimme nähdä, että taulukko näytetään oikein ohjaimessa määritettyjen avainarvoparien joukon tietojen kanssa.
Taulukon tiedot on luotu käymällä läpi kaikki avainarvoparit "ng-repeat" -direktiivin avulla.
Sisäänrakennettu kulmainen JS-suodatin
On hyvin yleistä käyttää sisäänrakennettuja suodattimia AngularJS: ssä muuttaaksesi tapaa, jolla tiedot näytetään taulukoissa. Olemme nähneet suodattimet toiminnassa edellisessä luvussa. Otetaan nopea suodattimien yhteenveto, ennen kuin jatkamme eteenpäin.
Angular.JS-suodattimia käytetään muotoilemaan lausekkeen arvo ennen kuin se näytetään käyttäjälle. Esimerkki suodattimesta on 'isot kirjaimet', joka ottaa merkkijonotuloksen ja muotoilee merkkijonon ja näyttää kaikki merkkijonon merkit isoin kirjaimin.
Joten alla olevassa esimerkissä, jos muuttujan 'TutorialName' arvo on 'AngularJS', alla olevan lausekkeen tulos on 'ANGULARJS'.
{{TurotialName | isot kirjaimet}}
Tässä osassa tarkastellaan tarkemmin, miten orderBy- ja iso-suodattimia voidaan käyttää taulukoissa.
Lajittele taulukko OrderBy-suodattimella
Tätä suodatinta käytetään taulukon lajittelemiseen yhden taulukon sarakkeen perusteella. Edellisessä esimerkissä kulmataulukotietojemme tulos ilmestyi alla olevan kuvan mukaisesti.
Ohjaimet
Ohjaimet toiminnassa
Mallit
Mallit ja sitovat tiedot
Direktiivit
Direktiivien joustavuus
Katsotaanpa esimerkkiä siitä, miten voimme käyttää "orderBy" -suodatinta ja lajitella kulmataulukon tiedot taulukon ensimmäisen sarakkeen avulla.
Event Registration
Guru99 Global Event
{{ptutor.Name}}
{{ptutor.Description}}
Koodin selitys:
Käytämme samaa koodia kuin teimme taulukon luomisessa, ainoa ero tällä kertaa on se, että käytämme "orderBy" -suodatinta ng-repeat -direktiivin kanssa. Tässä tapauksessa sanomme, että haluamme tilata taulukon avaimella "Nimi".
Jos koodi suoritetaan onnistuneesti, seuraava tulos näkyy, kun suoritat koodin selaimessa.
Tuotos:
Lähdöstä
Voimme nähdä, että kulmataulukon tiedot on lajiteltu ensimmäisen sarakkeen tietojen mukaan. Aineistossamme "direktiivit" -data tulee "mallit" -datasta, mutta koska käytimme orderBy-suodatinta, taulukot lajitellaan vastaavasti.
Näyttötaulukko isoilla suodattimilla
Voimme myös käyttää isojen kirjainten suodatinta muuttaa kulmataulukon tiedot isoksi.
Katsotaanpa esimerkki siitä, miten voimme saavuttaa tämän.
Event Registration
Guru99 Global Event
{{ptutor.Name | uppercase}}
{{ptutor.Description}}
Koodin selitys:
Käytämme samaa koodia kuin taulukon luomisessa, ainoa ero tällä kertaa on se, että käytämme isoja suodattimia. Käytämme tätä suodatinta yhdessä "ptutor.Name": n kanssa, joten koko ensimmäisen sarakkeen teksti näkyy isoilla kirjaimilla.
Jos koodi suoritetaan onnistuneesti, seuraava tulos näkyy, kun suoritat koodin selaimessa.
Tuotos:
Lähdöstä
Voimme nähdä, että käyttämällä isoja suodatinta kaikki ensimmäisen sarakkeen tiedot näytetään isoilla kirjaimilla.
Näytä taulukkoindeksi ($ -indeksi)
Lisää taulukon hakemisto lisäämällä
ja $ -indeksi.
Katsotaanpa esimerkki siitä, miten voimme saavuttaa tämän.
Event Registration
Guru99 Global Event
{{$index + 1}}
{{ptutor.Name}}
{{ptutor.Description}}
Koodin selitys:
Käytämme samaa koodia kuin teimme taulukon luomiseen, ainoa ero tällä kertaa on se, että lisäämme ylimääräisen rivin taulukkoon hakemistosarakkeen näyttämiseksi.
Tässä lisäsarakkeessa käytämme AngularJS: n tarjoamaa $ index -ominaisuutta ja lisätään sitten +1 -operaattoria indeksoimaan kutakin riviä.
Jos koodi suoritetaan onnistuneesti, seuraava tulos näkyy, kun suoritat koodin selaimessa.
Tuotos:
Lähdöstä
Voit nähdä, että ylimääräinen sarake on luotu. Tässä sarakkeessa näemme jokaiselle riville luodut hakemistot.
Yhteenveto:
Taulukkorakenteet luodaan käyttämällä HTML: ssä olevia vakiotunnisteita. Taulukon tiedot täytetään "ng-repeat" -direktiivin avulla.
OrderBy-suodattimella voidaan lajitella taulukko minkä tahansa taulukon sarakkeen perusteella.
Isojen kirjainten suodatinta voidaan käyttää tietojen näyttämiseen missä tahansa tekstipohjaisessa sarakkeessa isoilla kirjaimilla.
Ominaisuutta "$ index" voidaan käyttää taulukon indeksin luomiseen.
Yksi yleinen ongelma, joka kohdattiin kehityksen aikana AngularJS.JS-taulukoiden kanssa, on suurten tietojoukkojen toteuttaminen, joissa on yli 1000 riviä tietoja. Joskus ng-repeat-direktiivistä voi tulla ei-reagoiva, ja siten koko sivu ei reagoi toisinaan. Tällöin on aina parempi käyttää sivutusta, jossa tietorivit on jaettu useille sivuille.
