Toistuvien tietojen näyttäminen
Joskus meiltä saatetaan joutua näyttämään luettelo kohteista näkymässä, joten kysymys on, kuinka voimme näyttää luettelon ohjaimessamme määritetyistä kohteista näkymäsivullemme.
Angular tarjoaa direktiivin nimeltä "ng-repeat", jota voidaan käyttää ohjaimessamme määriteltyjen toistuvien arvojen näyttämiseen.
Katsotaanpa esimerkkiä siitä, miten voimme saavuttaa tämän.
Event Registration Guru99 Global Event
Topics
- {{tpname.name}}
Koodin selitys:
- Ohjaimessa määritämme ensin joukon luettelokohteita, jotka haluamme määritellä näkymässä. Täällä olemme määrittäneet taulukon nimeltä "TopicNames", joka sisältää kolme kohdetta. Jokainen kohde koostuu nimi-arvo-parista.
- Taulukko TopicsNames lisätään sitten jäsenmuuttujaan nimeltä "aihe" ja liitetään laajuusobjektiimme.
- Käytämme HTML-tunnisteita
- (Järjestämätön luettelo) ja
- (Luettelokohde) taulukon kohteiden luettelon näyttämiseen. Sitten käytämme ng-repeat-direktiiviä käydä läpi kaikki matriisimme kohteet. Sana "tpname" on muuttuja, jota käytetään osoittamaan kutakin matriisin aiheiden kohdetta.TopicNames.
- Tässä näytetään kunkin taulukon kohteen arvo.
Jos koodi suoritetaan onnistuneesti, seuraava tulos näkyy, kun suoritat koodin selaimessa. Näet kaikki taulukon kohteet (Pohjimmiltaan aiheiden aiheiden nimet).
Tuotos:
Angularjs-ohjaimet
Edistyksellinen ohjainesimerkki olisi käsite monien ohjaimien käyttämisestä kulmikkaassa JS-sovelluksessa.
Haluat ehkä määrittää useita ohjaimia erillisten liiketoimintalogiikkatoimintojen erottamiseksi. Aiemmin mainitsimme eri menetelmien käyttämisen ohjaimessa, jossa yhdellä menetelmällä oli erillinen toiminnallisuus numeroiden yhteenlaskemista ja vähentämistä varten. Sinulla voi olla useita ohjaimia, jotta logiikka voidaan erottaa toisistaan edistyneemmäksi. Sinulla voi olla esimerkiksi yksi ohjain, joka tekee vain operaatioita numeroilla, ja toinen, joka suorittaa operaatioita merkkijonoilla.
Katsotaanpa esimerkkiä siitä, miten voimme määritellä useita ohjaimia kulma.JS-sovelluksessa.
Event Registration Guru99 Global Event
{{lname}}
Koodin selitys:
- Tässä määritellään kaksi ohjainta, joita kutsutaan "firstController" ja "secondController". Jokaiselle ohjaimelle lisätään myös koodi käsittelyä varten. Ensimmäiseen ohjaimeemme liitämme muuttujan nimeltä "pname", jolla on arvo "firstController", ja toiseen ohjaimeen liitämme muuttujan nimeltä "lname", jolla on arvo "secondController".
- Näkymässä käytämme molempia ohjaimia ja käytämme toisen ohjaimen jäsenmuuttujaa.
Jos koodi suoritetaan onnistuneesti, seuraava tulos näkyy, kun suoritat koodin selaimessa. Näet kaiken "secondController" -tekstin odotetusti.
Tuotos:
Yhteenveto
- Ng-repeater-direktiivillä voidaan näyttää useita toistuvia kohteita.
- Meillä oli myös katsaus edistyneeseen ohjaimeen, joka tarkasteli useiden ohjaimien määritelmää sovelluksessa.