Mikä on ng-malli AngularJs: ssä?
ng-malli on Angular.JS-ohjelmassa malli, joka edustaa malleja ja jonka ensisijainen tarkoitus on sitoa "näkymä" malliin.
Oletetaan esimerkiksi, että halusit esittää loppukäyttäjälle yksinkertaisen sivun, kuten alla oleva, joka pyytää käyttäjää syöttämään "Etunimi" ja "Sukunimi" tekstiruutuihin. Sitten halusit varmistaa, että tallennat tiedot, jotka käyttäjä on kirjoittanut tietomalliin.
Voit käyttää ng-malli-direktiiviä etunimen ja sukunimen tekstikentän kenttien yhdistämiseen tietomalliin.
Ng-mallidirektiivi varmistaa, että "näkymässä" ja "mallissasi" olevat tiedot pidetään synkronoituna koko ajan.
Tässä opetusohjelmassa opit-
- Ng-malli-attribuutti
- Kuinka käyttää ng-mallia
- Tekstialue
- Syöttöelementit
- Valitse elementtimuoto Avattava valikko
Ng-model-attribuutti
Kuten tämän luvun johdannossa kerrotaan, ng-model-attribuuttia käytetään sitomaan mallin tiedot käyttäjälle esitettyyn näkymään.
Ng-malli-attribuuttia käytetään,
- Sitova säätimet, kuten syöttö, tekstialue ja valinnat näkymästä malliin.
- Anna vahvistuskäyttäytyminen - esimerkiksi vahvistus voidaan lisätä tekstiruutuun, että tekstiruutuun voidaan syöttää vain numeromerkkejä.
- Ng-model-attribuutti ylläpitää ohjauksen tilaa (Tilalla tarkoitamme, että ohjaus ja tiedot on aina pidettävä synkronoituna. Jos tietojemme arvo muuttuu, se muuttaa automaattisesti ohjauksen arvoa ja päinvastoin)
Kuinka käyttää ng-mallia
1) Tekstialue
Tekstialuetunnistetta käytetään määrittämään monirivinen tekstinsyötön hallinta. Tekstialue voi sisältää rajoittamattoman määrän merkkejä, ja teksti renderöidään kiinteän leveydellä.
Joten nyt tarkastellaan yksinkertaista esimerkkiä siitä, miten voimme lisätä ng-mallidirektiivin tekstialueohjaukseen.
Tässä esimerkissä haluamme näyttää, kuinka voimme siirtää monirivisen merkkijonon ohjaimesta näkymään ja liittää kyseisen arvon tekstialueohjaukseen.
Event Registration Guru99 Global Event
Koodin selitys:
- Ng-mallia direktiivin avulla liittää jäseneksi muuttuja nimeltään "pDescription" ja "tekstikenttään" kontrolli.
Muuttuja "pDescription" sisältää itse asiassa tekstin, joka välitetään tekstialueen ohjaimelle. Olemme myös maininneet 2 attribuuttia textarea-kontrollille, joka on rivit = 4 ja sarakkeet = 50. Nämä määritteet on mainittu, jotta voimme näyttää useita tekstirivejä. Määrittelemällä nämä määritteet tekstialueella on nyt 4 riviä ja 50 saraketta, jotta se voi näyttää useita tekstirivejä.
- Tässä liitämme jäsenmuuttujan pDescription-nimiseen laajuusobjektiin ja merkitsemme merkkijonon arvon muuttujaan.
- Huomaa, että laitamme / n-kirjaimen merkkijonoon, jotta teksti voi olla useita rivejä, kun se näkyy teksti-alueella. / N-kirjaimellinen jakaa tekstin useisiin riveihin, jotta se voidaan renderoida tekstialueella useina tekstiriveinä.
Jos koodi suoritetaan onnistuneesti, seuraava tulos näkyy, kun suoritat koodin selaimessa.
Tuotos:
Lähdöstä
- Voidaan selvästi nähdä, että pDescription-muuttujalle osana laajuusobjektia annettu arvo välitettiin textarea-ohjaimelle.
- Myöhemmin se on näytetty, kun sivu ladataan.
2) Syöttöelementit
Ng-malli-direktiiviä voidaan soveltaa myös syöttöelementteihin, kuten tekstiruutuun, valintaruutuihin, valintanappeihin jne.
Katsotaanpa esimerkkiä siitä, miten ng-mallia voidaan käyttää syöttötyypin "tekstilaatikko" ja "valintaruutu" kanssa.
Täällä meillä on tekstinsyöttötyyppi, jolla on nimi "Guru99", ja siellä on 2 valintaruutua, joista toinen on merkitty oletusarvoisesti ja toinen ei ole merkitty.
Event Registration Guru99 Global Event
Koodin selitys:
- Ng-mallia direktiivin avulla liittää jäseneksi muuttuja nimeltään "pname" tuloon kirjoittaa tekstiä ohjaus. Muuttuja "pname" sisältää "Guru99" -tekstin, joka välitetään tekstinsyötön ohjaimelle. Huomaa, että jäsenmuuttujan nimelle voidaan antaa mikä tahansa nimi.
- Tässä määritämme ensimmäisen valintaruudun "Ohjaimet", joka on liitetty jäsenmuuttujaan Topics.Controllers. Valintaruutu merkitään tälle tarkistusohjaimelle.
- Tässä määritellään ensimmäinen valintaruutu "Mallit", joka on liitetty jäsenmuuttujaan Topics.Models. Valintaruutua ei ole merkitty tälle tarkistusohjaimelle.
- Tässä liitetään jäsenmuuttuja nimeltä "pName" ja asetetaan merkkijonoarvo "Guru99".
- Julistamme jäsentaulukkomuuttujan nimeltä "Aiheet" ja annamme sille kaksi arvoa, ensimmäinen on "tosi" ja toinen "väärä".
Joten kun ensimmäinen valintaruutu saa arvon true, valintaruutu merkitään tälle ohjaimelle, ja vastaavasti, koska toinen arvo on väärä, valintaruutua ei ole merkitty tälle kontrollille.
Jos koodi suoritetaan onnistuneesti, seuraava tulos näkyy, kun suoritat koodin selaimessa.
Tuotos:
Lähdöstä
- Voidaan selvästi nähdä, että pName-muuttujalle annettu arvo on "Guru99"
- Koska ensimmäinen tarkistusarvo on "tosi", se on läpäissyt, valintaruutu on merkitty "Ohjaimet" -valintaruutuun. Koska toinen arvo on väärä, valintaruutua ei ole merkitty "Mallit" -valintaruutuun.
3) Valitse elementtimuoto Avattava valikko
Ng-malli-direktiiviä voidaan soveltaa myös select-elementtiin, ja sitä voidaan käyttää luettelo-osien täyttämiseen Select-luettelossa.
Katsotaanpa esimerkkiä siitä, miten voimme käyttää ng-mallia valitun syöttötyypin kanssa.
Täällä meillä on tekstinsyöttötyyppi, jolla on nimi "Guru99", ja siellä on valintalista, jossa on 2 luettelokohtaa "Ohjain" ja "Mallit".
Event Registration Guru99 Global Event
- Ng-mallia direktiivin avulla liittää jäseneksi muuttuja nimeltään "Aiheet" valintasisäänmenoon control. Valitse ohjausobjektin sisälle kullekin vaihtoehdolle liitämme Topics.option1-jäsenmuuttujan ensimmäiseen vaihtoehtoon ja Topics.option2 toiseen vaihtoehtoon.
- Tässä määritellään Aiheet-matriisimuuttuja, johon mahtuu 2 avainarvoparia. Ensimmäisen parin arvo on "Ohjaimet" ja toisen arvo on "Mallit". Nämä arvot välitetään syötetunnisteen valitsemiseksi näkymästä.
Jos koodi suoritetaan onnistuneesti, seuraava lähtö näytetään.
Tuotos:
Lähdöstä voidaan nähdä, että pName-muuttujalle annettu arvo on "Guru99" ja voimme nähdä, että valitulla tulo-ohjaimella on vaihtoehdot "Ohjaimet" ja "Mallit".
Yhteenveto
- Angular JS -malleja edustaa ng-mallidirektiivi. Tämän direktiivin ensisijaisena tarkoituksena on sitoa näkemys malliin. Kuinka rakentaa yksinkertainen ohjain ng-app-, ng-controller- ja ng-malli-direktiiveillä.
- Ng-mallidirektiivi voidaan liittää "tekstialue" -tulosäätimeen ja monirivijonot voidaan siirtää ohjaimesta näkymään.
- Ng-mallidirektiivi voidaan liittää syöttöohjaimiin, kuten teksti- ja valintaruutuohjaimiin, jotta ne olisivat dynaamisempia ajon aikana.
- Ng-mallidirektiiviä voidaan käyttää myös valitun luettelon täyttämiseen vaihtoehdoilla, jotka voidaan näyttää käyttäjälle.