Mis on ng-mudel AngularJ-des?
ng-model on Angular.JS-i direktiiv, mis esindab mudeleid ja mille peamine eesmärk on "vaate" sidumine "mudeliga".
Oletame näiteks, et soovisite lõppkasutajale esitada lihtsa lehe, nagu allpool näidatu, kus kasutajal palutakse sisestada tekstikastidesse "Eesnimi" ja "Perekonnanimi". Ja siis tahtsite tagada, et salvestate teabe, mille kasutaja on teie andmemudelisse sisestanud.
Rakenduse ng-model abil saate kaardil "Eesnimi" ja "Perekonnanimi" oma andmemudeli kaardistada.
Ng-mudeli direktiiv tagab, et "vaates" ja teie "mudeli" andmeid hoitakse kogu aeg sünkroonis.
Selles õpetuses saate teada
- Atribuut ng-model
- Kuidas ng-mudelit kasutada
- Tekstiala
- Sisendelemendid
- Valige elemendi vorm Rippmenüü
Ng-model atribuut
Nagu selle peatüki sissejuhatuses arutletakse, kasutatakse atribuuti ng-model teie mudeli andmete sidumiseks kasutajale esitatud vaatega.
Atribuuti ng-model kasutatakse
- Köitmine juhib näiteks sisestust, tekstiala ja valib vaates mudeli.
- Sisestage valideerimiskäitumine - näiteks saab tekstikasti lisada valideerimise, mille tekstikasti saab sisestada ainult numbrimärke.
- Atribuut ng-model hoiab kontrolli olekut (oleku järgi mõtleme, et juhtelementi ja andmeid hoitakse alati sünkroonis. Kui meie andmete väärtus muutub, muudab see automaatselt juhtelemendi väärtust ja vastupidi)
Kuidas ng-mudelit kasutada
1) tekstiala
Tekstiala märgendit kasutatakse mitmerealise tekstisisestuse juhtelemendi määratlemiseks. Tekstiala mahutab piiramatu arvu tähemärke ja tekst renderdatakse fikseeritud laiusega fontina.
Nüüd vaatame lihtsat näidet selle kohta, kuidas saame ng-mudeli direktiivi lisada tekstiala juhtimisele.
Selles näites tahame näidata, kuidas saaksime mitmerealise stringi kontrollerilt vaatele edastada ja selle väärtuse lisada tekstiala juhtnupule.
Event Registration Guru99 Global Event
Koodi selgitus:
- Ng-mudeli direktiiv külge kasutatakse liige muutuja nimega "pDescription", et "textarea" kontroll.
Muutuja "pDescription" sisaldab tegelikult teksti, mis edastatakse tekstiala juhtimisele. Oleme tekstivälja kontrolli jaoks maininud ka kahte atribuuti, milleks on read = 4 ja veerud = 50. Neid atribuute on mainitud, et saaksime näidata mitut tekstirida. Nende atribuutide määratlemisel on tekstialal nüüd neli rida ja 50 veergu, et see saaks näidata mitut tekstirida.
- Siin kinnitame liikumismuutuja ulatusobjekti nimega "pDescription" ja paneme muutujale stringi väärtuse.
- Pange tähele, et paneme / n-literali stringi nii, et tekst võib tekstireal kuvamisel olla mitu rida. Sõnaline / n jagab teksti mitmeks reaks, nii et seda saab tekstialal juhtida mitme tekstireana.
Kui kood on edukalt käivitatud, kuvatakse brauseris koodi käivitamisel järgmine väljund.
Väljund:
Väljundist
- On selgelt näha, et suleobjekti osana muutujale pDescription määratud väärtus edastati textarea juhtelemendile.
- Seejärel kuvatakse see lehe laadimisel.
2) Sisendelemendid
Ng-mudeli direktiivi saab rakendada ka sisendelementidele nagu tekstikast, märkeruudud, raadionupud jne.
Vaatame näidet ng-mudeli kasutamisest sisendtüübiga "tekstikast" ja "märkeruut".
Siin on meil tekstisisestuse tüüp, millel on nimi "Guru99" ja seal on 2 märkeruutu, üks märgitakse vaikimisi ja teist ei märgita.
Event Registration Guru99 Global Event
Koodi selgitus:
- Ng-mudeli direktiiv külge kasutatakse liige muutuja nimega "pname" sisendile tüüpi teksti kontrolli. Muutuja "pname" sisaldab teksti "Guru99", mis edastatakse tekstisisestuse juhtelemendile. Pange tähele, et liikmemuutuja nimele võib anda mis tahes nime.
- Siin määratleme meie esimene märkeruut "Kontrollerid", mis on lisatud liikumismuutujale Topics.Controllers. Selle kontrollkontrolli jaoks märgitakse märkeruut.
- Siin määratleme oma esimese märkeruudu "Mudelid", mis on lisatud liikumismuutujale Topics.Models. Selle kontrollkontrolli jaoks märkeruutu ei märgita.
- Siin kinnitame liikmemuutuja nimega "pName" ja paneme stringiväärtuse "Guru99".
- Kuulutame liikmemassiivi muutuja nimega "Teemad" ja anname sellele kaks väärtust: esimene on "tõene" ja teine "vale".
Nii et kui esimene märkeruut saab tõese väärtuse, märgitakse selle juhtelemendi jaoks märkeruut ja samamoodi, kuna teine väärtus on vale, siis selle ruudu jaoks märkeruutu ei märgita.
Kui kood on edukalt käivitatud, kuvatakse brauseris koodi käivitamisel järgmine väljund.
Väljund:
Väljundi põhjal
- On selgelt näha, et muutujale pName määratud väärtus on "Guru99"
- Kuna esimene kontrollväärtus on "tõene", mille see läbis, on märkeruut märkeruut "Kontrollerid" märgitud. Samamoodi, kuna teine väärtus on vale, pole märkeruut "Mudelid" märkeruutu märgitud.
3) Valige elemendi vorm Rippmenüü
Ng-mudeli direktiivi saab rakendada ka valitud elemendile ja seda saab kasutada loendi üksuste täitmiseks valitud loendis.
Vaatame näidet selle kohta, kuidas saame ng-mudelit kasutada valitud sisendtüübiga.
Siin on meil tekstisisestuse tüüp, millel on nimi "Guru99" ja seal on valitud loend koos kahe loendi üksusega "Kontroller" ja "Mudelid".
Event Registration Guru99 Global Event
- Ng-mudeli direktiiv külge kasutatakse liige muutuja nimega "Teemad", et tüübi valimine kontrolli. Valimiskontrolli sees kinnitame iga valiku jaoks esimese valiku jaoks Topics.option1 ja teise valiku Topics.option2 liikumismuutuja.
- Siin määratleme oma teemade massiivi muutuja, mis mahutab 2 võtmeväärtuste paari. Esimese paari väärtus on "Kontrollerid" ja teisel on "Mudelid". Need väärtused edastatakse vaates sisendsildi valimiseks.
Kui kood on edukalt käivitatud, kuvatakse järgmine väljund.
Väljund:
Väljundist on näha, et muutujale pName määratud väärtus on "Guru99" ja näeme, et valitud sisendjuhtimisel on valikud "Kontrollerid" ja "Mudelid".
Kokkuvõte
- Nurga JS mudeleid esindab ng-mudeli direktiiv. Selle direktiivi esmane eesmärk on siduda vaade mudeliga. Kuidas luua lihtsat kontrollerit ng-appi, ng-kontrolleri ja ng-mudeli abil.
- Ng-mudeli direktiivi saab linkida "tekstiala" sisendjuhtimisega ja mitmerealised stringid saab juhtpuldilt edastada.
- Ng-mudeli direktiivi saab linkida sisendjuhtimisega, näiteks teksti- ja märkeruutude juhtnuppudega, et muuta need käitusajal dünaamilisemaks.
- Ng-mudeli direktiivi saab kasutada ka valitud loendi täitmiseks koos võimalustega, mida saab kasutajale kuvada.